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HTML5 和 CSS3 概述 





HTML5 和 CSS3 并 非 只 是 W3C (万 维 网 联盟 ) 及 其 下 辖 工 作 组 提出 的 两 项 新 标准 。 它 们 
分 别 代 表 了 下 一 代 的 HTML 和 CSS 技术 ， 开 发 人 员 可 以 在 日 第 工作 中 使 用 它们 来 更 好 地 构建 时 
新 的 Web MH. EIRA RIT HTML5 和 CSS3 之 前 ， 我 们 先 讨论 一 下 HTML5 和 CSS3 的 优势 ， 
以 及 应 用 过 程 中 需要 和 面 对 的 难点 。 


1.1 一 个 新 的 Web 开发 平台 


HTML 中 的 众多 新 功能 都 围 纸 着 一 个 核心 目标 ， 即 构建 一 套 更 强大 的 Web 应 用 开发 平台 。 
从 更 多 的 描述 性 标 答 、 更 好 的 路 站 及 跨 窗 口 通信 到 动画 及 更 强 的 多 妹 体 文 持 ，HIML5 开发 人 员 
拥有 大 量 新 工具 实现 更 好 的 用 户 体 验 。 


1.1.1 更 多 的 描述 性 标记 


HTML 的 每 个 版 本 都 会 引入 一 些 新 标记 ,但 之 前 没有 哪个 版 本 能 像 HTMLS 这 样 ， 引 入 如 此 
多 的 直接 用 于 描述 内 容 的 标记 。 在 第 2 章 ， 你 将 看 到 用 于 定义 头 部 (header)、 尾 部 (footer)、 导 
航 区 段 、 侧 边栏 和 正文 的 元 素 。 此 外 ， 你 还 将 了 解 到 数值 范围 的 表示 、 进 度 条 的 生成 ， 以 及 如 何 
使 用 可 定制 的 数据 属性 来 对 数据 进行 标记 。 

1.1.2 ” 较 少 依赖 于 插件 的 多 媒体 支持 

现在 , 播放 视频 、 音 频 以 及 浏览 矢量 图 形 可 以 不 必 使 用 Flash 或 Silverlight f, 尽管 基于 Flash 
的 视频 播放 器 简单 易 用 ， 但 平 果 公司 的 移动 设备 并 不 支持 Flash。 考 虑 到 这 一 块 市 场 的 重要 性 ， 
在 设备 不 支持 Flash 时 ,你 需要 为 视频 播放 提供 蔡 代 方案 ,在 常 7 草 ,我 们 将 讨论 如 何 通过 HTMLS 
的 audio 标签 和 video 标签 实现 有 效应 变 。 











(QD 要 查看 HTMLS 规范 可 以 访问 http://www.w3.org/TR/html5/。 
Q CSS3 规范 分 散在 多 个 不 同 规 苑 的 模块 中 ， 访 问 http:/www.w3.org/Style/CSS/current-work 可 以 查看 其 最 新 进展 。 
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1.1.3 更 强大 的 Web 应 用 


为 了 让 Web 应 用 内 容 更 加 丰富 、 交 互 性 更 强 , 开发 人 员 曾 绞 尽 脑汁 ， 尝 试 了 包括 ActiveX 12 
件 和 Flash 在 内 的 各 种 手段 。HTMLS 提 供 了 一 些 令 人 称奇 的 功能 , 在 某 些 情况 下 ,你 甚至 可 以 完 
全 放弃 使 用 第 三 方 技术 。 

1.1.4 ” 跨 文 档 消息 通信 

Web 浏览 器 会 阻止 不 同 域 间 的 脚本 交互 或 影响 。 这 种 限制 机 制 能 够 防范 跨 站 脚本 对 那些 毫 无 

戒备 的 站 点 访问 者 的 攻击 ， 进 而 达到 保护 终端 用 户 的 目的 。 


但 每 枚 硬币 都 有 两 面 ,， 训 览 右 会 阻止 所 有 跨 站 脚本 的 交互 ， 即 使 是 我 们 目 己 写 的 完全 可 信任 
的 脚本 也 不 行 。 为 了 解决 这 一 问题 , HTML5 ?| 入 了 一 套 安 全 且 易 于 实现 的 应 对 方案 。 在 10.2 55, 
我 们 将 详细 讲解 相关 内 容 。 








1.1.5 Web Sockets 


HIMLS 提供 了 对 Web Sockets 的 支持 ， 通 过 Web Sockets， 开 发 人 员 能 够 实现 与 服务 絮 则 的 
持久 连接 。 如 果 要 获取 进度 更 新 ,你 不 必 再 像 以 往 那 样 轮 询 后 端 服 务 器 ， 取 而 代 之 的 方式 是 用 网 
页 订阅 革 个 套 接 字 ， 当 有 新 数据 到 达 时 ， 后 端 服务 器 会 主动 加 订阅 用 户 推送 通知 。 我 们 会 在 10.3 
节 中 人 和 倘 单 介绍 相关 内 容 。 

1.1.6 客户 端 存储 


我 们 倾向 于 将 HTMLS 看 做 一 项 Web 技术 ,但 基于 其 提供 的 Web Storage ffl Web SQL Database 
API， 我 们 在 训 览 历 中 构建 的 Web 应 用 能 够 完全 在 客户 端 持久 化 数据 ! 在 第 9 章 ， 我 们 会 展示 如 
何 使 用 这 些 API, 


1.1.7 更 精美 的 界面 


用 户 界面 是 Web 应 用 的 重要 组 成 部 分 ， 为 了 让 六 览 器 能 够 渲染 出 所 期 望 的 界面 效果 ,我 们 每 
天 都 在 极 努 力 地 工作 。 以 前 为 了 给 表格 添加 样式 或 者 绘制 圆 角 ， 我 们 除了 使 用 JavaScript 库 或 添 
加 大 量 宛 余 标 记 外 别 无 他 法 。 现 在 ，HTMLS5 和 CSS3 的 出 现 让 以 往 的 做 法 成 为 了 历史 。 


1.1.8 更 强大 的 表单 


HTMLS 提供 了 功能 更 为 强大 的 用 户 界 面 控件 。 长 期 以 来 ， 我 们 只 能 使 用 JavaScript 和 CSS 
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来 构造 请 块 、 日 期 选择 奏 和 颜色 选择 器 ， 而 在 HTMLS 中 ， 它 们 都 被 定义 成 了 真正 的 元 素 ， 就 像 
下 拉 列 表 、 复 选 框 和 单 选 按钮 一 样 。 我 们 会 在 第 3 草 详 细 描 述 如 何 使 用 它们 。 尽 管 不 是 每 个 训 秽 
筑 都 兼容 这 些 新 的 表单 控件 ， 你 仍然 需要 对 它们 保持 关注 ， 特 别 征 在 开发 Web 应 用 的 时 候 。 除 
了 不 依赖 JavaScript 库 就 能 提升 可 用 性 之 外 , HTMLS 还 市 来 了 可 访问 性 的 提升 。 屏幕 阅读 融和 其 
他 齐 蜗 程 序 会 通过 一 些 特殊 方式 实现 HTMLS 中 的 表单 控件 ， 以 方便 残 阶 人士 使 用 。 


1.1.9 提升 可 访问 性 


使 用 HIMLS 新 元 素 清 晰 摘 述 的 由 容 更 便于 屏幕 较 读 背 等 程序 使 用 。 例 如 对 于 亲 网 站 的 导航 ， 
它们 更 容易 找到 nav 标签 ,而 不 是 特定 的 div 或 无 序列 表 。 尾 部 、 侧 边栏 等 内 容 都 能够 被 轻松 地 
重新 排序 或 整体 跳 过 。 一般 的 页 面 解析 会 变 得 更 加 容易 ， 从 而 为 那些 依靠 辅助 技术 议 览 网 页 的 人 
们 带 来 更 好 的 体验 。 另 外 ,元素 的 新 属性 能 够 指明 元 素 的 角色 ， 以 便 屏 幕 阅 读 喜 更 容易 处 理 这 些 
元 素 。 在 第 5 草 ， 你 将 了 解 到 如 何 控制 这 些 新 属性 来 让 现 有 的 屏 医 阅读 背 处 理 它 们 。 


1.14.10 ”先进 的 选择 器 


利用 CSS3 选择 右 ， 你 可 以 识别 出 表格 的 奇数 行 和 偶数 行 、 所 有 处 于 选中 状态 的 复 选 框 ， 其 
至 征文 章 中 的 最 后 一 段 。 使 用 的 代码 和 标记 更 少 了 ， 能 完成 的 事情 却 更 多 了 。 此 外 ， 对 于 一 些 无 
法 修改 HTML 的 情况 ，CSS3 选择 绢 简化 了 我 们 的 样式 设 定 过 程 。 我 们 会 在 第 4 草 探 讨 如 何 有 效 
Tx Ue EE SS, 
1.1.11 视 帝 效果 

文本 和 图 像 上 的 阴影 效 朱 会 让 网 页 更 具 层 次 感 ,而 关 变 效 末 可 以 增加 页 面 的 维度 。 使 用 CSS3, 
你 可 以 直接 为 元 素 浴 加 阴影 和 痢 变 效 永 ,而 不 需要 借助 青 景 图 像 或 额外 的 标记 。 除 了 阴影 和 施 变 
效果 ， 我 们 还 可 以 使 用 CSS3 中 的 变换 (transformation) 来 制作 圆 角 或 旋转 元 素 。 本 书 第 8 ETE 
详 述 以 上 内 容 。 
1.2 DERE 


AR, 开发 人 员 使 用 HTMLS HEEM AZE ECC DU Ass 3E. 现在, 即使 在 IE6 
中 ， 你 也 可 使 用 HTMLS 来 开发 ， 逐 步 转换 使 用 的 标记 。 编 写 完 成 后 的 HTML 代码 甚至 可 以 用 
W3C 的 验证 服务 来 进行 验证 《当然 ， 这 是 有 条 件 的 ， 因 为 标准 也 在 读 进 中 )。 


如 末 你 用 过 HIML x XML, 一定 遇 到 过 文档 类 型 声明 (doctype declaration) 。 它 被 用 来 通知 
验证 副 和 编辑 器 哪些 标 答 和 属性 古 你 可 以 使 用 的 ,以 及 文档 应 该 以 何 种 方式 加 以 组 织 。 此 外 , 很 
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多 Web 训 览 僻 会 根据 它 来 检测 如 何 膏 染 网 页 。 通 前 情况 ， 有 效 的 文档 类 型 会 使 浏览 华 在 “标准 
EN MERAN. 


比较 一 下 ， 下 面 是 许多 网 站 用 到 的 相当 元 长 的 XHTML 1.0 Transitional 文档 类 型 : 


«!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtm11/DTD/xhtmli-transitional.dtd"» 


而 HTMLS5 文档 类 型 声明 非常 简单 : 


Download html5 why/index.html 





<!DOCTYPE html» 
在 文档 顶端 使 用 上 面 的 这 个 文档 类 型 声明 后 ， 你 就 可 以 使 用 HTML5 了 。 





当然 ， 你 不 能 使 用 目标 浏览 絮 不 支持 的 那些 HTML5 新 元 素 ， 这 并 不 妨碍 你 的 文档 进 
fr HTMLS 验证 。 
1.3 RR Z KIRA E 
HTMLS 和 CSS3 的 普及 道路 上 还 有 许多 障碍 ， 其 中 有 些 显而易见 ， 有 些 则 不 那么 明显 。 
IU / 小 乔 爱 问 M 


V JE, RER XHTML 中 的 自 闭合 标签 ， 在 HTMLS 中 我 还 能 使 用 它们 吗 ? 


当然 可 以 ! 许多 开发 人 员 喜 欢 XHTML, 因为 XHTML 对 标记 的 使 用 有 着 更 严格 的 要 求 。 
XHTML 文档 要 求 属性 值 必 须 在 引号 中 ， 内 容 标 签 必 须 自 财 合 ， 属 性 名 称 必 须 小 写 ， 以 及 只 有 
格式 良好 的 标记 才 可 以 发 布 到 万 维 网 上 。 改 用 HIMLS 后 ,你 无 需 改 变 使 用 方式 . 若 使 用 HTML5 
语法 或 XHTML 语法 ，HIMLS 文档 仍然 有 效 ， 不 过 ， 你 需要 理解 使 用 自首 合 标签 的 含义 。 

多 数 Web 服务 器 在 返回 HTML 网 页 时 为 其 指定 的 是 text/html MIME 类 型 KA IE 
无 法 正确 处 理 与 XHTML 页 面相 关联 的 MIME 类 型 app1ication/xm1+Xxhtm]。 基 于 此 ， 浏 
览 器 往往 会 去 掉 自 闭合 标签 ， 因 为 自 闭 合 标签 在 HTML5 之 前 被 视 为 无 效 的 HTML。 例 如 ， 
如 果 你 在 div 前 面 编写 了 自 闭合 script 标签 ， 如 下 所 示 : 


«script language-"javascript" src="application.js" /> 
<h2>He1p</h2> 


浏览 器 会 移 去 用 于 自 半 合 的 斜 枉 ， 然 后 ， 洽 染 器 会 认为 h2 和 包含 在 永远 都 无 法 闭合 的 
script 标 签 内 。 这 正 是 为 什么 编写 Script 标签 时 都 会 对 其 添加 一 个 结束 的 </script> 标 答 
进行 显 式 闭合 的 原因 ， 尽 管 自 闭合 标签 是 有 效 的 XHTML 标 记 ，。 
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所 以 ,如 果 在 HIMLS 文档 中 使 用 自 闭合 标签 ,你 需要 知道 这 些 细节 ,因为 页 面 会 以 text 
/html MIME 类 型 加 以 澄 染 。 如 果 想 了 解 更 多 此 方面 的 知识 ,可 以 访问 http;//www.webdevout. 


net/articles/beware-of-xhtml#myths , 


REKER., RAŽE RKRR, Au. FHT E. REKI RRE. 

当 你 开发 Web 应 用 时 , 必须 时 刻 牢记 漂亮 的 用 户 界面 和 绚丽 的 JavaScript 效果 就 是 酒 在 
有 蛋糕 上 的 糖 霜 。 即 便 没 有 那些 装饰 ， 网 站 也 可 以 相当 不 错 ， 这 就 像 一 块 蛋 薰 ， 以 它 为 基础 ， 
你 才能 往 上 酒 糖 霜 。 

我 遇 到 过 一 些 不 喜欢 糖 霜 的 人 人。 他们 会 从 和 蛋 烧 上 将 其 刊 挤 。 我 还 见 过 有 些 人 ,他 们 因为 
各 种 各 样 的 原因 使 用 没有 JavaScript 的 Web 应 用 。 


为 这 些 人 烘 烤 一 块 非 凡 的 蛋糕 吧 ， 然 后 再 撒 上 糖 霜 。 


1.3.1 IE 


正 是 目前 世界 上 应 用 最 广 的 浏览 器 ， 正 8 及 其 以 前 的 版 本 对 HTMLS 和 CSS3 的 支持 非常 弱 。 
IE9 做 了 改进 ， 但 仍 未 广泛 使 用 这 些 新 技术 。 这 并 不 是 说 我 们 在 网 站 中 完全 不 能 用 HTML5 和 
CSS3。 我 们 的 网 站 可 以 在 正中 正常 运行 ， 但 它 并 不 一 定 要 像 为 Chrome 和 Firefox 开发 的 版 本 那 
样 运行 。 我 们 可 以 提供 备用 解决 方案 ， 这 样 既 不 会 着 经 用 户 ， 也 不 会 失去 客户 。 


1.3.2 可 访问 性 


需要 与 网 站 交互 ,无 论 他 们 是 有 视力 障碍 或 听力 障碍 ， 还 是 使 用 旧 的 麟 贤 硕 、 连 接 慢 的 
RE HTML5 引入 了 一 些 新 元 素 ， 如 audio, video 和 canvas, — 
一 直 都 有 可 访问 性 问题 ， 而 canvas 又 提出 了 新 的 挑战 。 基 于 canvas 元 素 ， 我 们 能 够 在 HTML 
文档 中 使 用 JavaScript 创建 矢量 图 形 。 这 不 仅 给 会 视力 障碍 的 用 户 带 来 问题 ， 也 会 给 5% 左 右 禁 
用 了 JavaScript 的 用 户 制造 麻烦 ”。 


正 像 我 们 要 考虑 使 用 正 的 人 群 一 样 ， 在 使 用 新 技术 和 为 HTMLS 元 素 提 供 适 当 备 用 方案 时 ， 
我 们 也 应 该 考虑 到 可 访问 性 。 








QD 参见 http://visualrevenue.com/blog/2007/08/eu-and-us-javascript-disabled-index.html , 
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1.3.3 ”废弃 的 标签 


HIMLS 引入 了 许多 新 元 素 ， 但 同时 新 规 苑 也 废弃 了 不 少 稼 见 元 素 ， 你 可 能 会 在 上 自己 的 页 面 
中 找到 这 些 元 素 。 “如果 能 做 到 不 使 用 它们 ， 那 就 表明 你 进步 了 。 


首先 是 删除 了 几 个 表现 性 元 素 。 如 和 朱 你 在 代码 中 发 现 了 它们 ,马上 清除 它们 ! 用 语义 正确 的 
TARE EN], HEH CSS 来 确保 泻 染 后 的 效果 。 
Q basefont 
a big 
d center 
font 
S 


口 

口 

D strike 
Q tt 

口 


U 


其 中 的 一 些 标签 含义 非常 模糊 , 但 在 许多 用 Dreamweaver 之 类 的 所 见 即 所 得 编辑 器 维护 的 网 
页 里 ， 你 还 是 能 看 到 很 多 font 和 center 标签 。 

除了 表现 元 素 以 外 ， 规 范 还 移 除 了 对 框架 的 支持 。 框 架 一 直 受 到 像 PeopleSoft、Microsoft 
Outlook Web Access 这 些 企业 级 Web 应 用 的 推 深 ， 它 其 至 被 用 于 定制 门户 网 站 。 尽 管 框架 得 到 了 
广泛 应 用 , 但 其 带 来 了 如 此 多 的 可 用 性 和 可 访问 性 问题 ， 以 至 于 规范 中 不 得 不 将 它们 移 除 。 这 意 
味 以 下 元 素 不 会 再 出 现在 规 乞 中 : 


口 frame 














口 frameset 


a noframes 


你 应 该 使 用 CSS 或 JavaScript 来 设计 页 面 布 局 ， 而 不 是 使 用 框架 。 如 条 需要 使 用 frame 元 素 
来 确保 应 用 中 的 每 个 页 面 都 有 相同 的 头 部 、 尾 部 和 导航 ， 那 么 借助 Web 开发 框架 提供 的 一 些 工 
具 ， 你 同样 可 以 完成 这 件 事 。 因 为 有 了 更 好 的 选择 ， 如 下 一 些 元 素 也 被 移 除了 : 

Q abbr 取代 了 acronym; 

D object 取代 了 applet; 

D ul 取代 了 dir. 


(D 参见 http://www.w3.org/TR/html5-diff/, 


1.3 未 来 之 路 崎 哎 不 平 T 


> 


余 了 废弃 的 元 素 外 ， 还 有 许多 属性 将 不 再 有 效 。 这 包括 如 下 的 表现 属性 : 


align; 

body 标签 上 的 link. vlink. alink 和 text Æ J£; 
bgcolor; 

height 和 width; 

iframe 元 素 上 的 scrolling 属性 ; 

valign; 


hspace 和 vspace; 


D D D D D D D L 


table 标签 上 的 cellpadding. cellspacing 和 border 属性 。 


如 琳 像 下 面 这 样 在 链接 上 使 用 target 属性 : 

«a href-z"http://www.google.com" target="_blank"> 
那么 ， 节 好 通过 使 用 JavaScript RRS target 属性 ， 因 为 target 属性 在 规 泥 中 被 废弃 了 。 

head 标签 上 的 profile 属性 将 不 再 受到 支持 , 但 许多 WordPress 模板 中 都 使 用 了 这 个 属性 。 

mn, img 和 iframe 元 素 的 longdesc 属性 也 被 移 除 了 ， 这 让 倡导 可 访问 性 的 人 多 少 有 
点 失望 ， 因 为 1ongdesc 用 于 同 屏 幕 阅 读 器 用 户 提 供 附加 描述 性 信息 ， 而 这 种 方法 已 为 人 们 所 
Bes. 

如 东 计 划 在 现 有 网 站 中 使 用 HTML5， 你 需要 找到 这 些 元 素 ， 将 其 移 除 或 用 更 语义 化 的 元 素 
来 代替 。 记 得 要 用 W3C 验证 服务 来 检验 网 页 ， 这 样 有 助 于 找到 那些 废弃 的 标签 和 属性 。 


1.9.4 企业 利益 的 竞争 


IE 并 不 是 唯一 一 个 在 支持 HTML5 和 CSS3 EH JR BARI zs, Google, Apple 和 Mozilla 
基金 会 都 有 各 目的 时 间 表 ,要 争夺 和 霸权。 他们 就 视频 和 音频 编码 的 支持 问题 争论 不 休 ， 都 在 自己 
的 浏览 器 中 实现 了 各 自 的 想法 。 例 如 ，audio 元 素 在 Safari 中 能 够 播放 MP3 音频 文件 , 但 ogg XX 
件 无 法 运行 。 然 而 ，Firefox 支持 ogg 文件 ， 却 不 支持 MP3 文件 。 

差异 终 会 得 到 解决 的 。 在 此 期 间 ， 我 们 也 可 以 做 出 明智 选择 ， 要 么 仅 支 持 目 标 用 户 所 使 用 的 
部 分 类 型 的 训 贤 缉 ， 要 么 支持 全 部 训 贤 左 ， 针 对 每 种 剂 览 帮 都 给 出 不 同 的 实现 ， 直 到 标准 最 终 禹 
定 。 其 实 ， 具 体操 作 并 不 像 听 起 来 这 么 麻烦 ， 本 书 第 7 章 将 详细 介绍 这 个 问题 。 














(D 参见 http://validator.w3.org/, 
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1.3.5 HTML5 和 CSS3 仍 在 改进 


刚刚 谈 到 的 并 不 是 最 终 规范 ， 这 意味 着 这 些 规范 中 的 任何 东西 都 可 能 改变 。 目 前 ，Firefox、 
Chrome, Safari 已 经 能 够 很 好 地 支持 HTMLS 了 ， 如 果 规 范 改变 ， 浏 览 器 会 随 之 改变 ， 这 可 能 会 
导致 部 分 网 站 挂 掉 。 在 编写 本 书 的 过 程 中 ,CSS3 的 box-shadow 属性 先 被 移 除 , 之 后 又 被 重新 添 
加 到 了 规范 中 ，Web Sockets 协议 也 经 过 了 修改 ， 完 全 突破 了 客户 端 与 服务 器 之 间 的 通信 模式 .。 

跟 上 HTMLS 和 CSS3 进步 的 步伐 ， 不断 更 新 目 己 的 知识 ， 对 开发 人 员 而 言 ， 做 到 这 些 无 疑 
是 件 好 事 。 还 有 一 件 好 事 ， 本 书 讨论 的 许多 内 容 在 今后 很 长 一 段 时 间 内 都 适用 。 

倘若 某 种 目标 浏览 器 无 法 正常 运行 HTMLS5 代码 , 可 以 使 用 JavaScript 和 Flash 实现 来 作为 备 
选 方 案 , 保证 自己 的 实现 适合 所 有 用 户 ， 而 随 着 时 间 的 推移 ， 在 不 改变 当前 实现 的 前 提 下 ， 即 可 
移 除 JavaScript 和 其 他 备 选 方案 。 

不 过 ， 在 畅想 未 来 之 前 ， 需 要 先 对 HIMLS 有 个 全 面 的 了 解 。 下 一 草 中 ， 很 多 新 的 结构 标签 
在 向 你 招手 。 还 等 什么 ， 让 我 们 去 认识 一 下 吧 ! 


新 的 纪 构 标 和 党 和 属性 





本 书 的 前 儿童 将 着 重 讨论 如 何 使 用 HTMLS 和 CSS 的 特性 来 改善 用 户 界 面 。 从 中 , 我 们 会 了 
解 到 如 何 创 建功 能 更 强大 的 表单 ， 如何 轻 松 设计 表格 ,以 及 如 何 提升 页 面 在 辅助 设备 上 的 可 访问 
性 。 我 们 还 会 了 解 到 如 何 使 用 内 容 生成 来 改进 打印 样式 表 (print style sheet) 的 可 用 性 。 最 后 ， 
我 们 将 探索 如 何 基于 新 的 contenteditable 属性 进行 在 位 编辑 (in-place editing), PE, ERR 
开始 之 前 ， 让 我 们 先 看 一 下 如 何 利 用 HTMLS 的 新 元 素 优 化 页 面 结构 。 


如 今 有 一 个 严重 的 问题 在 影 啊 厦 众多 Web 开发 人 员 ， 即 滥用 div, div 的 滥用 如 同一 种 慢性 
J, We 开发 人 员 会 使 用 多 余 的 带 有 ID 属性 的 div 标签 来 作为 元 素 的 容器 ， 这 些 ID 值 可 能 是 
banner, sidebar, article, footer 等 。div 小 用 行为 极 具 传染 性 。 它 在 Web 开发 人 员 中 的 传 
染 速 度 非常 快 ， 由 于 div 不 会 在 页 面 上 直接 显示 ， 因 此 , 轻 度 滥用 的 div 可 能 会 不 为 人 知 地 隐 茂 
数 年 之 入。 
下 面 是 典型 的 div JH: 
«div id2"navbar wrapper > 
«div id2"navbar"» 
«ul» 
<li><a hrefz"/"-Home«/a»«/li» 
<li><a hrefz"/"-Home«/a»«/li» 
«/ul» 


«/div» 
«/div» 


上 面 的 代码 定义 了 一 个 无 序列 表 ， 它 是 一 个 块 元 素 ， 包 装 它 的 两 个 div 标签 也 是 块 元 素 。 
BAUR ER id 属性 指明 了 其 作用 ,但 古 去 掉 其 中 一 个 或 多 个 包装 元 素 后 ， 我 们 仍 能 得 到 
相同 的 效 琳 。 过 度 使 用 标记 会 导致 代码 爱 肿 ， 也 不 利于 页 面 的 美化 和 维护 。 


还 好 ， 这 种 现象 有 望 得 以 改观 。HTMLS5 规范 捉 供 了 一 组 全 新 的 语义 化 标签 ， 它 们 可 用 于 描 











C 这 里 的 “内 容 生成 ”是 通过 CSS 的 content 属性 来 实现 的 。 一 一 译 者 注 
© 谨 记 ， 块 元 素 独占 一 行 ， 而 内 联 元 素 可 以 与 其 他 元 素 在 一 行 上 。 
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述 目 身 所 包含 的 内 容 。 许 多 开发 人 员 都 会 在 自己 的 设计 中 使 用 侧 边 栏 、 头 部 、 尾 部 和 区 段 
(section)， 正 因为 如 此 ，HTMLS5 规范 引入 了 新 的 专用 于 划分 页 面 不 同 逻 辑 区 域 的 标签 。 我 们 可 
以 在 工作 中 使 用 这 些 新 元 素 。 有 了 HIMLS 的 帮助 ， 我 们 就 能 根除 滥用 div 的 现象 了 。 


除了 新 的 结构 标签 , 我 们 还 要 谈 谈 meter TR, 探讨 如 何 使 用 新 的 目 定义 数据 属性 在 元 素 中 
嵌入 数据 ， 进 而 取代 惯用 的 类 劫持 (hijacking class) 或 现 有 属性 。 何 言 之 ,我 们 要 弄 清 如 何在 适 
当 的 情况 下 选择 合适 的 标签 。 


本 章 中 ， 我 们 会 探讨 以 下 新 元 和 素 及 其 特性 。 


<header> Y. Ui E DC ERJAS. [C5, F3.6, IE8, S4, 0O10] 

<footer> 定 义 页 面 或 区 段 的 尾部 。[C5、F3.6、IE8、S4、0O10] 

<nav> 定 义 页 面 或 区 段 的 导航 区 域 。[C5、F3.6、IE8、S4、0O10] 
<section> 定 义 页 面 的 逻辑 区 域 或 内 容 组 合 。[C5、F3.6、IE8、S4、0O10] 
<article> 定 义 正文 或 一 骗 完 整 的 内 容 。[C5、F3.6、IE8、S4、0O10] 
<aside> 定 义 补充 或 相关 内 容 。[C5、F3.6、IE8、S4、0O10] 

自 定义 数据 属性 (custom data attribute) 一 一 人 允许 通过 使 用 “data-” 前 级 向 任意 元 素 中 
添加 目 定 义 的 数据 属性 。 DP DUEB S boc T1383. JavaScript 的 getAttribute() 方 法 获取 
这 些 属性 。] 

O <meter> 描 述 指定 苑 围 内 的 数值 。[CS、EF3.S、S4、O10] 

a <progress> 用 于 显示 实时 进度 的 控件 。[ 本 书 出 版 时 ， 疝 无 训 览 历 支 持 。] 


2.1 实例 1: 用 语义 化 标记 重 定 义 博客 


在 博客 应 用 中 ， 有 大 量 内 容 需 要 使 用 结构 化 标记 来 进行 组 织 。 博 客 包括 了 汰 部 、 尾 部 、 多 种 
导航 (博文 归档 链接 、 节 其 他 博客 或 网 站 的 链接 列表 和 内 部 链接 )、 博文 和 回帖 。 下 面 ， 我 们 就 
以 顶级 优秀 的 AwesomeCo 公司 的 博客 首页 为 例 ， 使 用 HIMLS 标记 编写 相应 原型 


我 们 的 设计 方案 如 图 2-1 rz, 这 是 一 个 非常 典型 的 博客 结构 , 其 头 部 区 域 包含 了 水 平 寻 航 。 
在 主要 的 正文 区 域 中 ， 每 坊 文 章 都 包括 头 部 和 尾部 。 此 外 ,文章 还 可 能 包括 摘要 或 旁 日 。 侧 边栏 
包含 了 其 他 的 导航 元 素 。 最 后 是 页 面 的 尾部 ， 它 包含 了 联系 方式 和 版 权 信 息 。 结 构 本 身 并 设 有 任 
何 新 意 ， 唯 一 不 同 的 征 ， 我 们 将 使 用 语义 化 标签 来 代 蔡 以 往 大 量 使 用 的 div 标签 。 











D D D DO DO D D 











O EMAER, DUE zs BEBO 8-5 MR 5 FU SC REUS IDEA. fts IB BERRIESS X. 
分 别 是 : C 表示 Google Chrome, 下 表示 Firefox, IE 表示 Internet Explorer, O 表示 Opera, S 表示 Safari, IOS 表 
示 使 用 移动 版 Safari 的 iOS 设备 ，A 表示 Android Browser, 
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2-1 使 用 了 HTMLS5 语义 化 标记 的 博客 结构 


代码 编写 完成 后 的 效 未 如 图 2-2 所 示 。 


AwesomeCo Blog! 


Latest Posts Archives Contributors Contact Us 


How Many Should We Put You Down For? Archives 


e October 2010 


Posted by Brian on October 1st, 2010 at 2:39PM « September 2010 


The first big rule in sales is that if the person leaves empty- "Never give someone a : rni p 1 10 
handed, they're likely not going to come back. That's why chance to say no when e June 2010 
you have to be somewhat aggressive when you're working selling your product." e May 2010 
with a customer, but you have to make sure you don't á 生生 ril 2010 
overdo it and scare them away. s SARI 2010 
One way you can keep a conversation going is to avoid asking questions that have yes or no * February 2010 


answers. For example, if you're selling a service plan, don't ever ask "Are you interested in our 3 or o AES 


5 year service plan?" Instead, ask "Are you interested in the 3 year service plan or the 5 year plan, 
which is a better value?" At first glance, they appear to be asking the same thing, and while a 
customer can still opt out, it's harder for them to opt out of the second question because they have 
to say more than just "no." 
25 Comments ... 

© 2010 AwesomeCo. 


Home About Terms of Service Privacy 


2-2 ”完成 之 后 的 页 面 布 局 


21 实例 1; 用 语义 化 标记 重 定义 博客 号 13 
2.1.1 以 正确 的 文档 类 型 声明 为 基础 


若 想 使 用 HIMLS 的 新 元 素 ， 就 需要 让 六 览 器 和 验证 器 能 够 识别 这 些 新 标签 。 创 建 名 为 
index.html 的 新 页 面 ， 写 入 基本 的 HIMLS 模板 : 


Download htmlbnewtags/index.html 


Line! <!DOCTYPE html» 
«html lang="en-US"> 
«head» 
«meta http-equiv-"Content-Type" content-" text/html; charset-utf-8" /> 
«title»AwesomeCo Blog«/title» 
«/head» 


«body» 
</body> 
10 </html> 


注意 示例 中 第 1 行 的 文档 类 型 声明 ， 它 是 HTMLS 的 文档 类 型 声明 。 如 琳 经 第 编写 网 页 ， 下 
面 这 段 元 长 难 记 的 XHTML 文档 类 型 声明 一 定 不 会 让 你 感到 陌生 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtm11/DTD/xhtmli1-transitional.dtd"» 


再 来 看 看 HTMLS 的 文档 类 型 声明 

<!DOCTYPE html» 
相 比 之 下 ，HIMLS 的 文档 类 型 声明 显然 更 加 简单 好 记 。 

文档 类 型 声明 有 两 个 作用 。 第 一 ， 验 证 絮 依 据 它 来 判断 应 该 采用 何 种 验证 规则 去 验证 代码 。 
第 二 ， 文 档 类 型 声明 能 够 强制 IE6、IE7 和 IE8 以 “标准 模式 ”(standards mode) 演 染 页 面 ， 在 页 


面 需要 兼容 所 有 浏览 如 上 时， 这 点 极其 重要 。HTMLS5 文档 类 型 再 明 具 备 了 上 述 两 种 作用 ， 它 甚至 
可 以 被 IE6 识别 。 


2.4.2 头 部 


不 要 将 头 部 (header) 与 h1, h2, h3 这 样 的 标题 (heading) 混为一谈 ， 头 部 可 能 包含 从 公 
司 的 Logo 到 搜索 框 在 内 的 各 式 各 样 的 内 容 。 目 前 ， 示 例 博客 的 头 部 只 包含 了 博客 的 标题 .: 


Download html5newtags/index.html 














Linel . «header id-"page header" 
2 «hl1-AwesomeCo Blog! «/hl» 
3  «/header» 


同一 个 页 面 中 可 以 包含 多 个 header 元 系 。 每 个 独立 的 区 段 或 文章 块 都 可 以 拥有 目 己 的 头 部 ， 
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所 以 ,示例 代码 中 为 头 部 添加 可 唯一 标识 一 个 元 素 的 ID 属性 是 有 用 的 。 借助 唯 一 的 了 D 值 , 开发 
人 员 可 以 更 便捷 地 添加 CSS 样式 ， 或 使 用 JavaScript 快速 定位 元 素 。 





语义 化 标记 

语义 化 标记 的 作用 是 描述 内 容 。 如 果 有 多 年 的 网 页 开发 经 验 , 那么 你 通常 会 将 页 面 划 分 
为 若干 区 域 ， 例 如 头 部 、 尾 部 、 LI a 
别 出 不 同 的 页 面 区 域 。 


语义 化 标记 能 够 降低 机 器 和 开发 人 员 理 解 内 容 含义 和 语 境 的 难度 。 section、header、 
nav 等 HTMLS 新 标记 的 作用 恰 在 于 此 。 


2.1.3 ”尾部 


footer 元 素 用 来 为 文档 或 相 邻 区 段 定 义 尾 部 信息 。 你 以 前 在 网 站 上 见 过 的 页 面 尾 部 通 销 会 包 
括 版 权 日 期 和 网 站 归属 信息 。HIMLS 规范 中 人 允许 在 同一 份 页 面 文档 中 出 现 多 个 footer 元 素 , 这 
就 意味 着 即使 在 博文 中 也 能 使 用 footer 元 素 。 


下 面 ， 我 们 来 为 页 面 定 义 一 个 简单 的 尾部 。 由 于 可 以 使 用 多 个 尾部 ， 因 此 我 们 为 页 面 尾部 设 
A f ID 属性 。 如 同 前 面 为 头 部 设置 ID 属性 一 样 ， 当 需要 为 此 元 素 及 其 子 元 素 添 加 样式 时 , 这 种 
做 法 有 助 于 我 们 准确 识别 它 。 


Download htmlbnewtags/index.html 





«footer id-"page footer"> 
«p»&copy; 2010 AwesomeCo.c«/p» 
«/footer» 


代码 中 的 尾部 只 包含 了 版 权 日 期 。 其实 ,尾部 与 头 部 类 似 , 通 第 也 会 包含 其 他 元 素 ， 如 导航 
JUR» 


2.1.4 ”导航 





导航 对 于 网 站 的 成 功 与 否 至 关 重 要 。 如 果 访 客 难 以 找到 所 需 信息 , 他 们 就 不 会 再 在 网 站 停留 ， 
就 这 乓 而 言 ， 存 在 一 个 与 导航 相对 应 的 HTML 标签 证 有 意义 的 。 

我 们 要 在 文档 头 部 添加 导航 。 守 航 中 链接 分 别 指 辣 博客 的 首页 、 文 草 列 表 页 、 博 文 作者 列表 
页 以 及 联系 人 信息 页 。 
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Download htmlbnewtags/index.html 


une! | «header id-"page header" 
«hl1-AwesomeCo Blog! «/hl» 

«nav» 

«ul» 

5 <li><a hrefz"/'"»Latest Posts«/a»«/li» 
<li><a hrefz'"archives"»Archives«/a»«/li» 
<li><a href-'"contributors"»Contributors«/a»«/li» 
<li><a href-z'"contact'"»Contact Us«/a»«/li» 

«/ul» 

10 «/nav» 

«/header» 


与 header 元 素 和 footer 元 素 一 样 ， 页 面 可 以 包含 多 个 nav 7638. o m UL P. AAE 
部 都 会 包含 导航 ， 因 此 访客 能 够 清晰 地 将 其 辨认 出 来 。 博 客 尾部 的 导航 链接 需要 分 别 指向 
AwesomeCo 的 公司 主页 、“ 关 于 我 们 ”(about us) 页 面 以 及 “服务 条 款 和 隐私 政策 ”页 面 。 我 们 
使 用 无 序列 表 来 组 织 这 些 链 接 ， 并 将 其 置 于 页 面 的 footer 元 素 中 : 


Download htmlbnewtags/index.html 





«footer id-"page footer'» 
«p»&copy; 2010 AwesomeCo.-«/p» 
«nav» 
«ul» 
<li><a hrefz'http: //awesomeco.com/"»Home«/a»«/li» 
<li><a hrefz'"about'"»About«/a»«/li» 
<li><a hrefz'"terms.html"»Terms of Service«/a»«/li» 
<li><a href-'"privacy.html"»Privacy«/a»«/li» 
«/ul» 
«/hnav» 
«/footer» 


EB GRE rp, RAH CSS 来 美化 这 两 个 导航 条 的 外 观 ， 所 以 现在 不 必 对 此 过 于 担心 。 
HTMLS5 新 元 素 的 作用 是 描述 内 容 ， 而 非 摘 述 内 容 的 外 观 。 


2.1.5 区 段 和 文章 


区 段 症 页 面 上 的 逻辑 区 域 , 在 描述 页 面馆 辑 区 域 时 , 我 们 可 以 使 用 section 元 素来 代 符 之 前 
被 随意 滥用 的 div 标签 : 
Download html5newtags/index.html 


«section id-"posts"» 
«/section» 


但 是 ， 也 不 要 乱用 section 元 素 ， 要 利用 section 元 素 将 内 容 合 理 归 类 ! 上 面 的 代码 中 ， 
我 们 创建 了 用 于 容纳 所 有 博文 的 区 段 。 不 过 ， 单 篇 博文 不 适合 都 独立 占用 区 段 。 为 此 ， 我 们 选择 
了 更 恰当 的 标签 。 
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2.1.6 ”文章 


最 适合 描述 网 页 实际 内 容 的 元 素 非 article 标签 莫 属 。 页 面 上 有 很 多 元 素 , 包括 头 部 、 尾 部 、 
导航 、 广 告 、 部 件 (widget), ame (blogroll)、 社 交 媒 体 书 签 等 ， 这些 繁杂 
的 元 素 很 容易 让 开发 人 员 遗 忘 非常 重要 的 一 点 一 一 人 们 访问 网 站 是 源 于 对 网 站 内 容 的 共 
article 标签 正好 可 以 用 来 描述 内 容 。 


每 篇 文 草 都 包 括 一 个 头 部 、 一 些 内 容 和 一 个 尾部 ,我 们 可 以 按 下 述 方式 定义 一 骗 完 整 的 文章 : 


Download htmlbnewtags/index.html 





«article class="post"> 
«header» 
«h2»How Many Should We Put You Down For?«/h2» 
«p»-Posted by Brian on 
«time datetime-"2010-10-01T14:39"»October 1st, 2010 at 2:39PM«/time» 


«/p» 
«/header» 
«p» 
The TUE big rule in sales is that if the person leaves empty-handed, 
二 | 一 、 s Pal q5Ll5241 r nadt 773 9x70 ë EA APAMA haral That! e ha ha 
they ' | C liKeiy HIO C going to COMS VACK. 1IICLL > why you nave to Jc 


somewhat aggressive when you're working with a customer, but you have 
to make sure you don't overdo it and scare them away. 
«/p» 
«p» 
One way you can keep a conversation going is to avoid asking questions 
that have yes or no answers. For example, if you're selling a service 
plan, don't ever ask &quot;Are you interested in our 3 or 5 year 
service plan?&quot; Instead, ask &quot;Are you interested in the 3 
year service plan or the 5 year plan, which is a better value?&quot; 
At first glance, they appear to be asking the same thing, and while 


a Ietnamar rmn st1ll Ant 4T'c handan far tham ^T nnt nt 
a customer vat JLI I Vu out, lU 一 IICI uci 1 VI CIECHI CU UPL out VI 


the second question because they have to say more than just 
&quot;no.&quot; 
«/p» 
«footer» 
<p><a hrefz'"comments"»«i»25 Comments«/i»«/a» ...«/p» 
«/footer» 
«/article» 


W INTRARE B]: 
x^ section 标签 和 article 标签 有 什么 区 别 ? 


我 们 可 以 将 section 标签 视 为 对 文档 逻辑 部 分 的 描述 , 而 将 article 标签 视 为 对 有 具体 
内 容 的 描述 ,例如 杂志 文章 、 博 客 日 志 、 新 闻 条 目 等 
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这 些 新 标签 描述 了 各 自 包含 的 内 容 。 区 段 可 以 含有 多 篇 文章 , 文章 内 部 又 可 以 划分 
若干 区 段 。 举 例 区 段 就 像 报 纸 上 的 体育 版 ， Mtr lich 每 篇 文章 又 可 
能 分 为 若干 部 分 。 某 些 区 段 已 经 有 了 对 应 的 标签 ， 如 头 部 和 尾部 。section 元 素 是 更 通 
用 的 元 床 ， 可 以 用 来 从 逻辑 上 对 其 i 他 元 素 进行 分 组 。 


| 语义 化 标记 的 作用 正 是 传达 内 容 的 含义 ， 


我 们 可 以 在 article 元 素 内 部 使 用 header 元 素 和 footer 元 素 ， 以 更 方便 地 描述 具体 的 膛 
辑 区 域 ， 也 可 以 用 section 元 素 将 文档 分 为 多 个 部 分 。 


2.1.7 ” 劳 白 和 侧 边 栏 


有 了 时候， 我 们 需要 为 主要 内 容 添 加 一 些 附加 信息 ， 如 引言 、 图 表 、 补 充 观 点 、 相 关 链 接 等 。 
此 时 ， 可 以 使 用 新 的 aside 标签 来 标识 这 些 元 素 : 


Download htmlbnewtags/index.html 


«aside» 
«p» 
&quot;Never give someone a chance to say no when 
selling your product.&quot; 
«/p» 
«/aside» 


我 们 将 标 广 (callout quote) & T aside 元 素 中 ， 并 将 aside 元 素 置 于 article 元 素 内 部 ， 
以 保证 aside 元 素 能 够 紧邻 着 与 其 相关 的 内 容 。 


A aside 元 素 的 完整 区 段 代 码 如 下 所 示 : 


Download html5bnewtags/index.html 





«section 1d= posts > 
«article class="post"> 

<header> 
<h2>How Many Should We Put You Down For?«/h2» 
«p»Posted by Brian on 

«time datetime-"2010-10-01T14:39"»October 1st, 2010 at 2:39PM«/time» 

«/p» 

«/header-» 


«aside» 
«p» 
&quot;Never give someone a chance to say no when 
selling your product.&quot; 
«/p» 
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</aside> 
«p» 
The first big rule in sales is that if the person leaves empty-handed, 
they're likely not going to come back. That's why you have to be 
somewhat aggressive when you're working with a customer, but you have 
to make sure you don't overdo it and scare them away. 
«/p» 
«p» 
One way you can keep a conversation going is to avoid asking questions 
that have yes or no answers. For example, if you're selling a service 
plan, don't ever ask &quot;Are you interested in our 3 or 5 year 
service plan?&quot; Instead, ask &quot;Are you interested in the 3 
year service plan or the 5 year plan, which is a better value?&quot; 
At first glance, they appear to be asking the same thing, and while 
a customer can still opt out, it's harder for them to opt out of 
the second question because they have to say more than just 
&quot;no.&quot; 
«/p» 
«footer» 
<p><a href-'"comments"»«1i»25 Comments«/i»«/a» ...«/p» 
«/footer» 
«/article» 
«/section» 


接 下 来 ， 需 要 添加 侧 边栏 了 。 
2.1.8 ”旁白 绝 非 页 面 侧 边栏 


博客 右 侧 是 一 个 侧 边 ee i 倘若 你 认为 可 以 使 用 aside 标签 来 定 
义 博客 侧 边栏 就 大 错 特 错 了 。 尽 管 可 以 那么 做 ， 但 会 ALGAIS, aside Bk&ZERJUEH 9) 208 
为 了 展示 与 文章 相关 的 内 容 。 因 此 ， a N 术语 表 (glossary) 或 引言 的 最 佳 位 置 。 


要 将 含有 历史 归档 链接 列表 的 侧 边 栏 标 记 出 来 ， 使 用 section 标签 和 nav 标签 即 可 。 


Download htmlbnewtags/index.html 








«section id-"sidebar'"» 
«nav» 
«h3»Archives«/h3» 
«ul» 
<li><a hrefz"2010/10"»October 2010«/a»«/li» 
<li><a href-z'"2010/09"-September 2010«/a»«/li» 
<li><a href-"2010/08"-August 2010«/a»«/li» 
<li><a href-z"2010/07"»July 2010«/a»«/li» 
<li><a hrefz"2010/06"»June 2010«/a»«/li» 
<li><a href="2010/05">May 2010«/a»«/li» 
<li><a href-"2010/04"-April 2010«/a»«/li» 
<li><a hrefz"2010/03"-»March 2010«/a»«/li» 
<li><a href-"2010/02"-February 2010«/a»«/li» 
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<li><a href="2010/01">January 2010«/a»«/li» 
</ul> 
</nav> 
</section> 


以 上 是 博客 的 HTML 结构 。 接 下 来 我 们 为 新 元 素 添 加 样式 。 


2.1.9 添加 样式 


我 们 可 以 像 为 div 标签 添 加 样式 那样 ， 来 为 新 元 素 添加 样式 。 自 和 完 ， 创建 名 为 style.css 的 样 
式 表 文 件 ， 然 后 ， 在 头 部 放置 样式 表 引 用 以 实现 样式 表 文 件 与 HTML 文档 的 关联 ， 代 码 如 下 : 








Download htmlSnewtags/index.html 


«link rel="stylesheet" href="style.css" type="text/css"> 
首先 ， 将 页 面 内 容 整 体 居中 ， 同 时 设置 基本 的 字体 样式 : 


Download html5bnewtags/style.css 


bodyt 
width:960px; 
margin:15px auto; 
font-family: Arial, "MS Trebuchet", sans-serif; 


j 
pi 
margin:O O 20px 0; 
j 
p, lii 
line-height:20px; 
j 


接 下 来 ， 定 义 头 部 的 宽度 : 
Download html5newtags/style.css 


header#page_header{ 
width:100%; 
j 


对 导航 链接 应 用 样式 ， 将 无 序列 表 变 换 成 水 平 导航 条 : 


Download html5bnewtags/style.css 





header£Zpage header nav ul, £page footer nav ulí 
list-style: none; 
margin: O0; 
padding: O0; 

j 


Zpage header nav ul li, footerZpage footer nav ul lií 
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padding:0; 
margin: 0 20px 0 0; 
display:inline; 
上 
id 值 为 posts 的 区 段 需 a 一 定 宽度 ， 文 草 内 部 的 标注 也 需要 浮动 。 此 外 ， 


我 们 还 要 加 大 标注 的 字 


Download hitml5newtags/style.css 





section#postst{ 
float: left; 
width: 7496; 
j 


sectiongZposts asideí 
float: right; 
width: 3526; 
margin-left: 526; 
font-size: 20px; 
line-height: 40px; 
} 


还 需 序 动 侧 边栏 ， 并 定义 其 宽度 : 
Download html5newtags/style.css 


sectionZsidebarí 
float: left; 
width: 25%; 

j 


可 度量 的 数值 范围 表 和 进度 条 
如 果 需 要 在 Web 应 用 中 展示 抵押 品 价值 范围 表 或 实现 上 传 进度 条 ， 可 以 考虑 使 用 
HTMLS 规范 中 引入 的 meter ZL € fe progress 元素。 


对 于 已 知 最 小 值 和 最 大 值 的 数值 范围 ,我 们 可 以 借助 meter 元 素 对 其 上 的 固定 一 点 进行 
pii meter 元 素 的 使 用 应 符合 HIMLS 规范 的 要 求 ， 所 以 不 应 用 meter 元 素来 描述 如 


、 醒 量 等 没有 最 小 值 或 最 大 值 的 特征 ,除非 已 为 它们 设 定 了 明确 的 数值 范围 。 例 如 ， 有 


aac duisi bid i 


Download htmi5 meter/index.html 


«section id-"pledge"- 
«header» 
<h3>0ur Fundraising Goal«/h3» 
«/header» 
«meter title-"USD" id-"pledge goal" 
value2"2500" min="0" max="5000"> 
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$2500.00 
</meter> 
<p>Help us reach our goal of $5000!</p> 
«/section» 


progress A 5 meter 元 素 极为 相似 ， 其 设计 初衷 是 显示 实时 进度 ， 比 如 显示 上 传 文 
件 时 的 进度 。 相 比较 之 下 ，meter 元 素 的 设计 初 袁 是 显示 当前 相对 固定 的 可 度量 值 ， 如 某 用 
户 在 服务 器 上 的 可 用 存储 空间 的 快照 。progress 元 素 的 用 法 与 meter 元 素 的 用 法 类 似 : 

Download html5 meter/progress.html 


«progress id-"progressbar" max-100»«span»0-/span»?«/progress» 

尽管 还 没有 浏览 器 为 meter 元 素 和 progress 元 素 定义 默认 样式 ,但 是 我 们 能 够 使 用 
JavaScript 获取 meter 的 数值 并 创建 自己 的 可 视 效 果 ， 可 以 用 meter 元 素 或 progress 元 素 
对 数据 进行 语义 化 描述 。 参 考 本 书 中 与 meter 元 素 相关 的 示例 文件 ， 你 就 能 够 掌握 其 用 法 。 





我 们 需要 定义 尾部 样式 , 并 在 尾部 上 清除 浮动 , 从 而 保证 尾部 始终 位 于 页 面 底部 , 代码 如 下 : 
Download hitml5newtags/style.css 


footer#page_footer{ 
clear: both; 
width: 100%; 
display: block; 
text-align: center; 


j 
以 上 是 基本 的 样式 。 至 此 ， 我 相信 你 会 将 它 的 效 霖 做 得 越 来 越 好 。 





2.1.10 EIR 


虽然 博客 首页 在 Firefox, Chrome 和 Safari 中 显示 正 负 ,但 当 管 理 人 员 通 过 TE oU 8$] — 4 iL 
七 八 粳 的 页 面 时 ， 他 们 难免 会 失望 。 内 容 倒是 至 现 出 来 了 ， 但 由 于 EPIRA HTMLS 的 新 元 素 ， 
所 以 无 法 对 它们 应 用 样式 ， 整 个 页 面 看 起 来 就 像 20 世纪 90 年 代 中 期 的 作品 。 


唯一 能 让 IE 在 新 元 素 上 应 用 样式 的 方法 古 使 用 JavaScript 将 新 元 素 定 义 为 文档 的 一 部 分 。 复 
杂 的 事情 瞬间 变 容 多 了 了。 我们 只 需 在 页 面 的 head f Sz P 7IH hack 代码 即 可 ,这 是 为 了 保证 代码 
的 执行 能 够 先 于 剖 览 左 对 其 他 元 系 的 演 染 。 我 们 将 hack fCRG ECT FUR. IE QU DE S8 BEVUXUR AR TE 


注释 (conditional comment) 中 : 














Download htmlbnewtags/index.html 


<!--[if It IE 9]» 
«script type-"text/javascript'» 
document.createElement( nav"); 
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document.createElement("header"); 
document.createElement("footer"); 
document.createElement(" section"); 
document.createElement( aside"); 
document.createElement("article"); 
«/script» 
«![endif]--» 


上 和 面 这 种 特殊 的 注释 古 针对 IE 9.0 以 前 的 所 有 版 本 的 。 现 在 重新 加 载 页 面 ， 一 切 正 第 。 


我 们 创建 的 页 面 依赖 于 JavaScript， 这 点 需要 开发 人 员 考 虑 清楚 。 文 档 的 组 织 形式 和 可 读 性 
得 到 了 一 定 程度 的 改观 ， 由 此 来 看 ,这么 做 是 值得 的 。 同 时 ， 内 容 仍 可 以 正常 显示 上 且 能 被 屏幕 阅 
读 器 阅读 ， 因 而 没有 “可 访问 性 ”的 顾虑 。 不 过 ， 对 于 那些 故意 禁用 JavaScript 的 用 户 来 说 ， 你 
的 做 法 貌似 极其 “过 时 ”。 


本 廊 的 方法 展示 了 如 何 为 少量 元 泰 添加 文 持 以 及 具体 的 做 法 。Remy Sharp 杰出 的 
HTML-Shiv 对 此 进行 了 更 为 深远 的 研究 ， 如 采 你 希望 支持 更 多 元 素 ，HIML-Shiv 方法 更 合适 。 


2.2 ”实例 2: 使 用 自 定义 数据 属性 创建 弹出 窗口 


在 开发 Web 应 用 时 ， 有 时 会 用 JavaScript 获取 文档 之 外 的 信息 ， 某 些 情况 下 ,我 们 需要 用 一 
些 技 巧 来 处 理 这 些 额 外 信息 以 保证 Web 应 用 能 够 正常 运行 。 一 般 而 言 ， 技 巧 无 外 平 是 将 额外 的 
言 息 塞 入 事件 处 理 程序 或 滥用 rel 属性 或 class 属性 以 方便 注入 行为 。 感谢 HTMLS 规范 ?| 入 了 
自 定义 数据 属性 ， 让 不 堪 回 首 的 往日 一 去 不 返 。 


所 有 的 目 定义 数据 属性 都 以 data- 前 级 开头 ，HTML5 文档 的 验证 如 会 在 验证 时 忽略 它 。 开 
发 人 员 可 以 在 任意 元 素 中 加 入 目 定 义 数 据 属性 , 属性 值 可 以 古 照 片 的 元 数据 、 经 纬度 坐标 或 者 弹 
出 窗口 的 尺寸 。 最 棒 的 是 ， 几 乎 在 所 有 议 宽 副 中 ， 你 邦 能 够 使 用 目 定义 数据 属性 ， 因 为 我 们 可 以 
轻 多 地 使 用 JavaScript 来 获取 它们 。 


2.2.1 行为 与 内 容 的 分 离 ， 或 者 说 为 什么 设置 onc1ick 不 好 


过 去 的 数 年 里 , 弹出 窗口 的 名 声 一 直 不 好 ， 而 这 通 第 是 很 目 然 的 事情 。 弹 出 窗口 党 被 用 来 问 
用 户 显 示 广 告 , 或 者 伪 淡 成 不 被 怀疑 的 间谍 软件 或 病毒 , 而 最 糟糕 的 古 骗取 个 人 信息 并 随后 加 以 
出 售 。 因 此 ， 大 多 数 闵 览 副 都 有 阻止 弹出 窗口 的 插件 也 就 不 足 为 怪 了 。 


不 过 , 弹出 窗口 并 非 总 是 不 好 。Web 应 用 的 开发 人 员 第 第 需要 依赖 于 弹出 窗口 ， 以 便 向 用 户 
显示 在 线 帮助 信息 、 附 加 选项 或 者 其 他 重要 的 用 户 界面 功能 。 为 了 不 让 弹出 窗口 过 于 邦人 厌烦 ， 




















(D 参见 http://code.google.com/p/htmlS5shiv/, 
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我 们 需要 用 一 种 不 引 人 注 目的 方式 来 实现 它 。 训 览 AWesomeCo 公司 的 人 力 资 源 页 面 时 ， 你 会 
到 几 个 链接 ， 它 们 用 于 打开 显示 服务 条 于 的 弹出 窗口 ， 其 代码 实现 大 多 如 下 : 
Download html5 popups with custom data/original example 1.html 


«a href='#' 
onclick2 "window.open( holiday pay.html ',WinName, 'width-300,height-300) ; "> 
Holiday pay 

«/a» 


X8 1E BEER REUS SELL) JI SRI 6 VL, EKE, JavaScript 菜鸟 在 急 学 如 何 实现 弹出 窗 
口 时 大 都 会 采用 这 种 方式 。 在 进一步 实现 所 需 效 末 之 前 ， 我 们 要 指出 此 种 方式 的 两 个 问题 。 


2.2.2 ”提升 可 访问 性 

链接 的 目标 地 址 没有 设置 ! 如果 JavaScript 被 禁用 了 ， 那 么 链接 将 无 法 引导 用 户 进 入 相应 页 
面 。 这 是 一 个 非常 严重 的 问题 ， 以 至 于 我 们 需要 立即 解决 。 我 建议 开发 人 员 永 远 不 要 省 略 href 
属性 ， 任 何 情况 下 都 不 要 为 href BER P 及 类 似 值 。 现 在 ,我 们 将 弹出 窗口 中 显示 的 资源 的 
地 址 赋值 给 href 属性 ， 代 码 如 下 : 





Download html5 popups with custom data/original example 2.html 
«a hrefz'holiday pay.html' 


onclicke"window.open(this.href,WinName, 'width-300,he1ght-300) ; "> 
Holiday pay 
«/a» 


上 面 的 代码 中 ， 我 们 通过 JavaScript 代码 读 取 a 元 素 的 href 属性 值 ， 进 而 得 到 资源 的 链接 
地 址 。 

构建 可 访问 的 页 面 ， 第 一 步 是 确保 禁用 JavaScript 的 情况 下 ， 所 有 功能 仍 能 正常 运转 。 
2.2.3 ”废弃 oncl1ick 


注音 保持 行为 与 内 容 分 离 ， 正 如 用 链接 样式 表 保 持 样 式 信息 分 离 一 样 。 开 始 的 时 候 ， 使 用 
onclick 会 市 来 便利 ， 但 是 想象 一 下 页 面 上 有 50 个 链接 的 情况 ， 那 时 你 会 看 到 onclick 方法 
失控 的 场面 。 你 将 只 能 一 遍 又 一 遍地 编写 重复 的 JavaScript 代码 。 如 果 是 通过 服务 器 端 代码 来 生 
PDA assu NR, JD ZA PILAE CET UI JavaScript 事件 ， 进 而 会 导致 大 量 不 必要 的 HTML 代码 的 
出 现 。 


符 代 方法 是 为 每 个 链接 分 配 可 识别 的 CSS 类 名 : 
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Download html5 popups with custom data/original example 3.html 
«a href-"holiday pay" class-'"popup'"-»Holiday Pay«/a» 


Download html5 popups with custom data/original example 3.html 


var links = $C"a.popup"); 


links.click(Cfunction(Cevent) 1 
event.preventDefault(); 
window.open($(this).attr('href')); 

32; 


上 述 代码 中 使 用 了 jQuery WRR aXX 579 popup 的 元 素 ， 随 后 ， 我 们 为 其 中 每 个 元 
RAI click 事件 分 别 添加 一 个 监听 如 。 当 有 人 单 击 链 接 时 ，click 方法 中 的 代码 会 被 执行 。 
preventDefault 方法 用 于 阻止 默认 的 单 击 事件 行为 。 在 示例 中 ， 它 阻止 了 页 面 跳 转 。 

我 们 还 扎 了 一 件 事 一 一 设 有 设置 窗口 的 太 寸 信息 和 位 置信 息 ,， 而 在 未 优化 的 代码 中 , 我们 是 
设置 了 的 。 我 们 希望 即使 是 不 太 熟 悉 JavaScript 代码 的 页 面 设 计 者 ， 也 能 基于 每 个 链接 设置 窗口 
Rs 


2.2.44 ”有 目 定 义 数 据 属性 来 解围 


当 创 建 应 用 了 JavaScript 的 Web 应 用 时 ， 刚 刚 提 到 的 情况 比较 常见 。 如 你 所 见 ， 在 代码 中 
存储 窗口 的 期 望 高 度 和 宽度 是 可 取 的 , 但 是 onclick 275 27 V Ze v, 我 们 可 以 改换 在 元 素 上 髓 
入 属性 的 方式 加 以 实现 。 现 在 要 做 的 是 将 链接 改造 成 下 面 这 种 形式 : 





Download html5 popups with custom data/popup.html 


«a href-2"help/holiday pay.html" 
data-width-2"600" 
data-height-2 "400" 
title2-"Holiday Pay" 
class- "popup" »Holiday pay«/a» 


离 完 成 只 有 一 步 之 遥 ,， 修改 之 前 编写 的 click 事件 以 抓 取 链 接 上 设置 的 各 项 自 定义 数据 属性 ， 
然后 将 其 传人 window.open 方法 。 





Download html5_popups_ with custom data/popup.html 


$(function { 
$(".popup").click(function(event){ 
event.preventDefault(); 
var href = $(this).attr("href"); 


D 即 不 熟悉 JavaScript 的 页 面 设 计 者 能 够 借助 自己 熟悉 的 技术 去 影响 应 用 的 展示 效果 。 一 一 译 者 注 
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var width = $(this).attr("data-width"); 
var height = $(this).attr("data-height"); 
var popup = window.open (href, "popup", 
"height=" + height -",width-" + width + ""); 
393 
iP 


收工 ! 现在 ， 单 击 链接 后 会 打开 一 个 新 窗口 。 


提醒 

在 示例 中 , 我 们 使 用 自 定义 数据 属性 为 客户 误 脚本 提供 了 额外 的 信息 。 对 于 具体 问题 而 
言 ,这 是 一 种 聪明 的 做 法 ,同时 也 说 明了 自 定 义 数 据 属 性 的 使 用 方法 。 尽 管 这 种 做 法 倾向 于 
将 表现 信息 与 标签 相 混合 ， 但 是 它 向 你 展示 了 使 用 JavaScript ERRAR Bn FAHA 
Z^ f fe] X 


2.2.5 ENR 


HEX; JavaScript， 目 定义 数据 属性 就 能 正常 工作 。 目 定义 数据 属性 不 会 使 剂 蜗 


artt. IH. HTMLS5 文档 类 型 声明 可 保证 文档 是 有 效 的 ， 因 为 以 data- 开 头 的 属性 都 会 被 
忽略 。 


2.2.0 ”未 来 展望 


一 旦 新 标签 和 属性 得 到 了 广泛 支持 , 我 们 就 可 以 用 它们 来 做 一 些 有 趣 的 事情 。 使 用 打印 样式 
表 ， 我 们 能 够 轻易 地 识别 并 隐 忠 导航 和 文章 的 尾部 : 

nav, article>footer{display:none} 

借助 于 脚本 语言 ,我们 能 够 迅速 识别 网 站 内 或 页 面 中 的 所 有 文 草 。 但 最 重要 的 是 ,我 们 用 到 
的 标签 能 够 恰如其分 地 描述 其 所 标记 的 内 容 , 这 样 一 来 ,我们 就 能 够 写 出 更 好 的 样式 表 和 更 强大 
的 JavaScript 代码 了 。 

开发 人 员 可 以 用 自 定 义 数据 属性 将 备 式 各 样 的 信息 租 入 标记 中 。 事 实 上 , AF 6 草 中 ， 我 们 
会 再 次 用 到 目 定 义 数 据 属性 。 

借助 于 上 自 定 义 数据 属性 ， 使 用 JaveScript 定位 到 所 有 data-remote=true 的 表单 标签， 
就 能 得 知 哪些 表单 标签 应 使 用 Ajax 进行 提交 ， 这 种 做 法 与 Ruby on Rails 框架 中 的 做 法 是 一 
致 的 。 
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我 们 还 可 以 使 用 自 定义 数据 属性 将 日 期 和 时 间 缓 存在 页 面 中 , 并 以 用 户 时 区 为 基准 来 显示 日 
期 和 时 间 。 只 需 将 时 间 以 UTC 的 形式 置 于 HTML 页 面 中 ， 在 客户 端 将 其 转换 成 用 户 本 地 时 间 即 
可 。 上 自 定 义 数据 属性 允许 开发 人 员 在 页 面 中 舱 入 真实 有 用 的 数据 ,而 越 来 越 多 的 框架 和 库 会 利用 
它 的 优点 。 我 确信 ， 在 日 凋 工 作 中 ， 你 会 发 现 它 有 很 多 用 处 。 


至 此 ， 我 们 可 以 一 安永 逸 地 根除 蓝 用 div 的 情况 了 。 


创建 易 用 的 Web 表单 





如 果 曾 设计 过 复杂 的 用 户 界 面 ， 你 就 会 知晓 基本 HTML 表单 控件 的 局 限 性 有 多 大 。 为 了 实 
现 复 厅 的 表单 ， 你 不 得 不 使 用 文本 框 、 选 择业 单 、 单 选 按 钮 、 复 选 框 。 菜 些 情况 下 其 至 还 需要 动 
用 容重 的 多 选 列 表 ， 为 此 你 需要 不 厌 其 烦 地 反复 向 用 户 解 释 如 何 使 用 它 。(“ 按 住 Ctrl 键 ， 单 击 
MIRA, wmi Mac, MIZE Cmd 键 再 点 选 。) 


所 以 ， 你 会 像 所 有 优秀 Web 开发 人 员 所 做 的 那样 ， 转 而 使 用 Prototype 或 jQuery 库 ， 或 者 维 
护 一 套 整 合 了 HTML, CSS 和 JavaScript 的 控件 和 功能 。 但 是 ， 当 表单 上 同时 出 现 了 斌 块 、 日 历 
控件 、 选 值 框 (spinbox)、 具 有 自动 完成 功能 的 文本 框 和 可 视 化 编辑 右 时 ， 你 就 会 迅速 意识 到 你 
为 自己 制造 了 一 场 梦 厦 。 此 时 , 你 不 仅 需 要 保证 自己 在 当前 页 面 上 引用 的 控件 不 会 与 已 引用 的 其 
他 控件 发 生 冲 突 ， 而 且 还 要 保证 它们 不 会 与 其 他 JavaScript 库 相 冲突 。 你 可 能 会 花费 数 小 时 来 调 
试 日 期 选择 器 ， 并 最 终 发 现 是 Prototype 库 出 了 问题 ， 而 根本 原因 则 是 因为 jQuery AA TS 
Prototype 库 的 $O 国 数 。 于 是 ， 改 用 jQuery 的 noConfil1ctO 方 法 ， 完 成 改动 后 ， 你 又 发 现 颜色 
选择 器 无 法 正常 工作 了 ， 因 为 插件 代码 编写 得 不 够 健壮 。 

看 到 这 里 ,如 果 你 笑 了 , 说 明 你 遇 到 过 上 述 情况 。 如 果 你 生气 了 , 我 猜 也 是 因为 同样 的 原因 。 
还 好 ， 有 和 希望 改变 这 一 切 。 本 章 中 ， 我 们 将 使 用 一 些 新 的 表单 域 类 型 来 构建 儿 个 Web 表单 ， 并 
同时 实现 自动 聚焦 功能 和 占 位 文本 。 

最 后 ， 我 们 将 讨论 如 何 使 用 新 的 contenteditable 属性 将 任意 HTML 域 转换 成 用 户 输入 
控件 。 

HERMA, KERALA FIRE. 

a 电子 邮件 输入 域 [<input type="email">] 

[O10.1, IOS] 
a URL 输入 域 [<input type-"ur1"»] 
a 电话 号 码 输 入 域 [<input type-"tel"»] 
































显示 一 个 用 于 输入 电子 邮件 地 址 的 表单 域 。 





显示 一 个 用 于 输入 URL 的 表单 域 。[O10.1、IOS] 
显示 一 个 用 于 输入 电话 号 码 的 表单 域 ., [O10.1, IOS] 
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a 搜索 域 [<input type="search"> 
010.1, IOS] 

a HER (CE) [«input type=" range">] 一 一 显示 一 个 请 块 控件 。[C5、S4、O10.1] 

a 数值 设 定 框 [<input type="number">] 一 一 显示 一 个 用 于 输入 数值 的 表单 域 ， 通 冲 是 选 
值 框 。[C5、S5、0O10.1、IOS] 

口 日 期 选择 域 [<input type="date">] 
周 。[C5、S5、O10.1] 

a 可 以 选择 时 间 的 日 期 选择 域 [<input type="datetime">] 一 一 显示 一 个 用 于 选择 日 
斯 和 时 间 的 表单 域 ， 支 持 日 期 和 上 时间、 本 地 日 斯 和 时 间或 只 有 时 间 。[C5、S5、0O10.1] 

D 颜色 选择 域 [<input type="color">] 一 一 显示 一 个 用 于 指定 颜色 的 表单 域 。[C5、S5] 
(Chrome 5 和 Safari 5 支持 此 类 型 ， 但 并 不 将 其 显示 为 特殊 的 控件 。) 

a 支持 日 动 聚 焦 [<input type="text" autofocus>] 支持 将 焦点 置 于 特定 的 表单 元 素 
上 。 [C5、S4] 

口 支持 占 位 文本 [<input type-"email" placeholder="meQexample.com">] 
单 域内 显示 占 位 文本 。[C5、S4、F4] 

0 支持 在 位 编辑 [<p contenteditable»lorem ipsum</p>] 
7i, [CA, S32, IE6, OIO.1] 


现在 ， 我 们 来 学 习 其 中 一 些 非常 有 用 的 表单 域 类 型 。 
3.1 实例 3: 使 用 新 的 输入 域 挡 述 数据 


HTMLS 引入 了 几 种 新 的 输入 类 型 ， 开 发 人 员 可 以 用 它们 来 更 加 精确 地 描述 用 户 输入 数据 的 
类 型 。 除 了 标准 的 文本 框 、 单 选 按钮 和 复 选 枉 ， 你 还 可 以 使 用 电子 邮件 输入 框 、 日 期 选择 奉 、 凑 
色 选 树 右 、 数 值 设 定 框 和 清 块 。 剖 览 左 能 够 基于 这 些 新 的 表单 域 类 型 为 用 户 泻 当 出 效 末 更 好 的 控 
件 ， 而 在 这 一 过 程 中 不 需要 编写 任何 的 JavaScript 代码 。 移 动 设 备 、 平 板 电脑 上 的 虚拟 键盘 以 及 
触摸 屏 能 够 根据 表单 域 类 型 的 不 同 展示 出 不 同 的 键盘 布局 。 例 如 ， 当 用 户 在 URL 类 型 或 email 类 
型 的 文本 框 中 输入 数据 时 ，iPhone 上 移动 版 的 Safari 浏览 器 会 显示 另 一 种 键盘 布局 ， 以 方便 用 户 
输入 诸如 @、.、:、/ 这 样 的 特殊 字符 。 


3.1.1 改进 AwesomeCo 项 目 中 的 表单 


AwesomeCo 的 目标 是 创建 一 个 全 新 的 项 目 管理 类 的 Web 应 用 , 以 方便 开发 人 员 和 项 目 经 理 把 
探 其 所 参与 的 众多 项 目的 进度 。 每 个 项 目 都 有 自己 的 名 称 、 电 子 邮 件 地 址 和 测试 环境 的 URL, 通 


显示 一 个 用 于 输入 搜索 关键 字 的 表单 域 。[C5、S4.、 

















显示 用 于 日 期 选择 的 表单 域 ， 文 持 日 期 、 月 份 或 














文 持 在 表 
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过 测试 环境 的 URL, 项 目 经 理 可 以 在 项 目 开发 过 程 中 预览 网 站 的 效 末 。 此 外 ,项 目 属性 还 包括 局 
动 的 日 期 、 优 先 级 以 及 估算 的 项 目 完成 所 需 小 时 数 。 了 最 后 ， 负 责 开发 的 经 理 往往 倾 同 于 为 每 个 项 
目 分 配 一 种 颜色 ， 以 方便 其 在 查看 项 目 报告 时 快速 识别 出 不 同 的 项 目 。 


下 面 ， 我 们 使 用 新 的 HTMLS 表单 控件 来 创建 项 目 首选 项 页 面 的 示例 。 
3.1.2 创建 基础 表单 





先 创建 用 于 发 送 POST 请 求 的 基础 表单 。 因 为 项 目 名 称 输入 框 没 有 什么 特殊 要 求 ， 所 以 我 们 
使 用 text 类 型 的 文本 框 。 
Download html5forms/index.html 
«form method="post" action-"/projects/1"'- 
«fieldset id-"personal information"» 
«legend-Project Information«/legend» 
«ol» 
«li» 
«label forz"name"-Name«/label» 
«input type="text" name="name" autofocus id-"name"» 
</li> 
<li> 
<input type="submit" value="Submit"> 


</li> 
</ol> 


</fieldset> 


</form> 

注意 , 我 们 在 有 序列 表 中 放置 了 用 于 标记 表单 的 label 标签 。 创建 具有 良好 可 访问 性 的 表单 
时 ， 擅 述 性 标签 label 必 不 可 少 。1abel 标签 的 for 属性 用 于 引用 与 其 相关 联 的 表单 元 素 的 id, 
这 种 用 法 有 助 于 屏幕 阅读 左 识 别 页 面 上 的 表单 域 。 有 序列 表 提 供 了 一 种 展 好 的 展现 形式 来 列 出 表 


单 域 ， 从 而 避 开 了 复杂 的 表格 结构 或 div 结构 。 此 外 ， 有 序列 表 能 够 辅助 标记 出 你 所 期 望 用 户 填 
写 表单 域 的 顺序 。 


3.1.3 ”使 用 range 类 型 创建 滑 块 








背 块 第 被 用 户 用 于 增 减 数值 ,一 个 实用 场景 是 项 目 经 理 使 用 背 块 来 快速 直观 地 修改 项 目 优 先 
级 。 在 HIMLS 中 ， 你 可 以 使 用 range 类 型 来 实现 请 块 。 
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Download html5forms/index.html 


«label forz'"priority"»Priority«/label» 
«input type-"range" min-2"O" max-"10" 
name-"priority" value-2"0" id-"priority'» 


仿照 3.1.2 节 的 代码 ， 用 Ti 元 素 把 上 面 的 代码 包 起 来 ， 然 后 将 其 加 入 到 基础 表单 中 。 
Chrome 和 Opera 训 览 器 都 支持 请 块 部 件 ， 其 效果 如 图 3-1 所 示 。 








Priority 
3-1 
注意 ， 我 们 在 代码 中 设 定 了 min 属性 和 max 属性 来 限制 请 块 域 值 的 范围 。 
3.1.4 使 用 选 值 框 处 理 数字 


我 们 在 很 多 场景 中 都 会 用 到 数字 , 尽管 直接 输入 数字 的 方式 很 简单 , 但 使 用 选 值 框 (Spin box) 
可 以 使 数字 微调 变 得 更 容易 。 作 为 一 种 控件 ， 选 值 框 帝 有 用 于 增 减 数值 的 箭头 。 下 面 用 选 值 框 来 
实现 估算 时 间 的 功能 。 以 这 种 方式 实现 后 ， 调 整 时 间 更 容 多 。 

Download html5forms/index.html 


«label for-z"estimated hours"-Estimated Hours«/label» 
«input type= number" name-"estimated hours" 

min-"O" max-" "1000" 

1d2"estimated hours"» 


Opera 文 持 选 值 框 控件 ， 其 效 霖 如 图 3-2 所 示 。 





Estimated Hours a 


3-2 


默认 情况 下 , 也 可 以 在 选 值 框 中 直接 输入 数字 , 与 range 类 型 的 请 块 类 似 , 开发 人 员 可 以 为 
其 设 定 好 大 值 和 最 小 值 。 但 是， 直接 输入 的 数字 不 受 最 小 值 和 最 大 值 的 限制 。 














此 外 , 控件 增 减 的 步 长 是 由 step 属性 来 指定 的 。step 属性 可 以 古 任 意 数字 , 其 默认 值 为 1。 
3.4.5 日 期 控件 


记录 项 目 开 始 时 间 非 常 重要 ， 我 们 和希 现 越 简单 越 好 。 此 时 ，date 类 型 的 日 期 控件 是 
佳 选 择 。 
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Download html5forms/index.html 


«label for="start date"»Start date</label> 
«input type-" date" name-"start date" id-"start date" 
value-"2010-12-01"» 


写作 本 书 的 时 候 ，Opera dé "EE— Se Pre H BXETPETSTEBUDU Voas. 
实现 后 的 效 末 如 图 3-3 所 示 。 





Start date 2010-12-0 $ 
December >) 2010 Lad 


Mon Tue Wed Thu i 








Safari 5.0 B] y zi SCR STULTE TECTEE , TEUER TR H RAR. MRENE, 日 期 控件 会 默认 显 
zw “1582”. Eb uias AER H BIEUEIR SX — 4 oC AME, 


3.1.6 email1 类 型 


在 HTML5 Hys, email 类 型 文本 框 被 设计 成 用 于 输入 单一 的 电子 邮件 地 址 或 者 电子 邮件 
地 址 列表 ， 因 此 ， 在 需要 输入 电子 邮件 的 场合 使 用 它 是 最 合适 不 过 的 了 。 
Download html5forms/index.html 


«label forz'"email"-Email contact«/label» 
«input type= email" name= email" id-"email"» 


移动 设备 还 能 从 email 类 型 的 表单 域 中 获得 更 多 好 处 ， 只 需 改 变 虚 拟 键盘 的 布局 , 电子 邮件 
地 址 的 输入 就 会 变 得 更 容易 。 


3.1.7 ur1 类 型 


这 种 表单 域 类 型 用 于 处 理 URL。 如 果 访 客 使 用 的 是 iPhone， 它 会 特别 好 用 ， 因 为 iPhone 会 
为 其 显示 相应 的 键盘 布局 ， 上 面 有 一 些 快捷 按钮 辅助 用 户 快速 输入 网 址 ， 类 似 于 在 Safari 移动 版 
的 地 址 栏 中 输入 URL 时 显示 的 键盘 。 添 加 用 于 输入 临时 URL 的 文本 框 ， 代 码 如 下 : 





Download html5forms/index.html 


«label for-z'"url'"»Staging URL«/label» 
«input type-"url" name-"url" id-"url"- 
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使 用 uri 类 型 时 ， 虚 拟 键盘 的 布局 也 会 发 生变 化 。 
3.1.8 ”color 类 型 


最 后 ， 我 们 需要 能 够 输入 颜色 码 。 为 此 ， 我 们 使 用 color 类 型 。 
Download htmlbforms/index.html 


«label for="project color"»Project color«/label» 
«input type-"color" name-"project color" id-"project color" 


编写 本 书 时 ， 还 设 有 训 览 右 能 够 显示 颜色 选择 器 控件 ， 但 这 并 不 应 成 为 阻止 你 使 用 color 
类 型 的 理由 。 运 用 合适 的 标记 来 描述 内 容 ， 会 让 你 在 未 来 游 轧 有余， 特别 征 在 需要 提供 兼容 性 文 
持 的 时 候 。 


HAT, Opera 能 够 支持 上 述 新 控件 中 的 大 部 分 ， 如 图 3-4 所 示 。 不 过 ， 使 用 Firefox, Safari 或 者 
Google Chrome 训 览 页 面 的 时 候 ， 你 只 会 看 到 些许 不 同 。 接 下 来 ,我 们 要 修正 浏览 绢 的 兼容 性 占 题 。 


Project Information 
Name 


Priority 


—— — | E] 
Estimated Hours | Ex 


Start date | 2010- 12-0 +) 
| December (+) 2010 c3 


Mon Tue Wed Thu 


Email contact 
Staging URL 


Project color 





图 3-4 Opera 已 经 支持 的 一 些 表单 控件 


3.1.9 ENR 


对 于 无 法 解析 的 表单 域 类 型 , 训 览 伙 会 将 其 视 为 text 类 型 ， 所 以 刚刚 制作 的 表单 仍然 可 用 。 


3.1 实例 3: 使 用 新 的 输入 域 描 述 数据 C4 33 


在 这 一 点 上 ， 开 发 人 员 可 以 绑 定 jQuery UI 或 YUI 部 件 来 对 新 控件 进行 变换 。 随 着 时 间 的 推移 ， 
越 来 越 多 的 训 览 右 会 文 持 新 控件 ， 介 时 ， 你 就 可 以 移 除 这 些 JavaScript HF T. 


3.1.10 ” 蔡 换 颜色 选择 器 


借助 jQuery 的 CSS3 属性 选择 器 ,我 们 能 够 轻易 地 识别 并 替换 颜色 选择 绒 。 定 位 出 所 有 color 
类 型 的 input 表单 域 ， 并 对 其 应 用 一 个 名 为 SimpleColor 的 jQuery 插件 : 
Download html5forms/index.html 


if Cl!hasColorSupport(O)1 
$C' input[type-color]'2).simpleColor(; 
$ 


由 于 在 标记 中 使 用 了 新 的 表单 类 型 , 所 以 我 们 无 需 添 加 额外 用 于 标识 颜色 选择 器 的 类 名 或 其 
他 标记 。 属 性 选择 器 与 HTML5 配合 得 天 衣 无 颖 。 

如 果 浏 览 器 原生 支持 颜色 选择 器 ， 那 就 没 必 要 调用 颜色 选择 器 插件 了 ， 为 此 要 用 一 些 
JavaScript 代码 来 检测 阐 览 右 是 否 支 持 color 类 型 的 input 表单 域 。 





Download html5forms/index.html 


Linel — function hasColorSupport(O 1 
- input = document.createElement(" input"); 
input.setAttribute("type", "color"); 
var hasColorType = (input.type !-- "text"); 
5 // 处 理 Safari/ Chrome 的 部 分 实现 
if(hasColorType2t1 
var testString - "foo"; 
input.value-testString; 
- hasColorType = (input.value !- testString); 
10 } 
return(hasColorType); 
j 


首先 , 使 用 JavaScript 原生 方法 创建 input 元 素 并 将 其 type 属性 值 置 为 color。 接 下 来 ， 取 
出 type 属性 值 以 确定 浏览 如 是 否 爷 许 我 们 将 其 值 置 为 color。 如 采 返 回 值 是 color, Wi HHX] 
War oc color 类 型 ， 否 则 需要 我 们 应 用 插件 来 完成 相应 功能 。 


代码 的 第 6 行 ， 有 趣 的 事情 发 生 了 。Safari 5 和 Google Chrome 5 部 分 实现 了 color 287, "iz 
们 支持 type 属性 值 为 color， 却 不 会 实际 显示 颜色 选择 部 件 。 最 终 ， 我 们 在 页 面 上 获得 的 还 只 
是 一 个 文本 框 。 为 此 ,我 们 在 检测 方法 中 为 表单 域 的 value 属性 赋值 ， 看 看 值 是 否 会 被 替换 。 如 
果 被 替换 , 我 们 就 可 以 认为 浏览 器 实现 了 对 颜色 选择 如 的 支持 ,因为 输入 域 的 行为 与 普通 文本 框 
的 行为 已 大 不 相同 。 


一 
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完整 的 替换 颜色 选择 妖 的 实现 代码 如 下 : 
Download html5forms/index.html 


if Cl!hasColorSupport(O)( 
$C'input[type-color]'2).simpleColor(O; 
$ 


解决 方案 虽然 有 效 ， 但 不 够 健壮 。 它 仅 针 对 一 组 特定 的 训 览 器 ， 而 且 仅 解决 了 颜色 控件 的 浏 
览 器 兼容 性 问题 。 其 他 控件 也 都 有 各 目的 解决 方案 等 待 你 去 逐个 学 习 。 感 谢 上 帝 ， 有 个 不 错 的 解 
决 方案 可 以 毕 其 功 于 一 


3.1.11 Modernizr 


Modernizr^ 库 能 够 检测 浏览 器 是 否 支 持 HTML5 以 及 CSS3 的 许多 特性 。 尽 管 它 没 有 为 缺失 
os 
可 靠 的 机 制 。 


在 项 目 中 引入 Modernizr 之 前 ， 你 要 确保 已 经 了 解 其 运行 机 制 。 无 论 是 否 亲 自 编码 ， 只 要 你 
——— —— ——————— 
部 分 支持 。 这 样 一 来 ， 当 Chrome 或 Firefox 的 下 一 版 本 发 布 时 ， 你 可 能 不 得 不 为 它们 提供 一 套 替 
代 方 案 。 谁 知道 呢 ， 也 许 到 时 候 ， 你 会 将 目 己 的 解决 方案 页 献 给 Modernizr! 


可 以 用 类 似 的 方法 实现 日 期 选择 器 、 请 块 等 控件 的 替代 方案 。jQuery UI 库 "中 以 组 件 的 形式 
包含 了 清 块 和 日 期 选择 奉 。 在 页 面 上 5 引用 jQuery UI Fe, RMA i zi a MELER, MRA 
SCR. NAH JavaScript 版 控件 进行 蔡 换 。 


最 终 ， 你 会 逐步 停止 使 用 JavaScript F, EREA E SERV EH)TSPE. DU UL zxÓE GEHT 
测 颇 为 复杂 ， 因 此 在 开发 过 程 中 ， ee 不 过 ， 在 本 书 余 下 的 章节 中 ， 为 了 方 
便 读者 了 解 相 应 的 运作 机 理 ， 我 们 仍然 会 手动 编写 兼容 性 检测 代码 。 


除了 新 的 表单 域 类 型 外 ，HTMLS5 还 引入 了 一 些 其 他 提升 可 用 性 的 表单 域 属性。 下 面 ， 我 们 
来 了 解 一 下 autofocus 属性 。 


3.2 ”实例 4: 使 用 autofocus 属性 定位 第 一 个 表单 域 元 素 
客户 端 完 成 加 载 页 面 时 ， 将 光标 定位 到 表单 的 第 一 个 表单 域 上 能 够 提高 用 户 输入 数据 的 束 














(QD 参见 http:/www.modernizr.com/。 
© 参见 http://jqueryui.com, 


3.3 实例 $: 使 用 placeholder 属性 进行 提示 d 35 
E, 许多 搜索 引擎 通过 JavaScript 实现 了 这 个 功能 ， 而 现在 ，HIMLS 提供 了 自动 聚焦 功能 ， 并 将 
其 视 为 语言 的 一 部 分 。 
要 使 用 HIMLS 的 目 动 聚焦 功能 ， 你 只 需 在 任意 表单 域 中 添加 autofocus 属性 即 可 ， 如 同 我 
们 在 3.1 市 所 做 的 那样 。 








Download htmlSforms/index.html 


«label for="name">Name</label> 
«input type="text" name="name" autofocus id="name"> 


autofocus 属性 稳定 生效 的 前 提 是 页 面 中 设置 了 唯一 的 autofocus 属性 。 如 果 设 置 了 多 个 ， 
训 览 器 会 把 用 户 光 标定 位 到 最 后 一 个 设置 了 autofocus 属性 的 表单 域 上 。 


i 


[E] 


仅 需 少量 JavaScript 代码 即 可 检测 出 是 否 存 在 autofocus JETE, Aud HP D A sA F 
autofocus 属性 ， 则 可 使 用 jQuery 完成 元 素 聚 焦 。 这 也 许 是 你 能 提供 的 最 简单 的 替代 方案 。 





Download html5forms/aufofocus.js 


function hasAutofocus() { 
var element = document.createElement('7nput'); 
return 'autofocus' in element; 


j 


$ (functionO 1 
if(!hasAutofocus OD (1 
$C'input[autofocus-true] ') . focus ; 
I 
133 


在 页 面 中 植 入 上 面 这 段 JavaScript 代码 后 ， 你 就 可 以 随时 使 用 autofocus 属性 而 不 必 担 心 剂 
览 右 兼容 性 问题 了 。 

页 面 加 载 完 成 时 ，autofocus 属性 能 够 略微 简化 用 户 开 始 填写 表单 的 过 程 。 现 在 ,你 可 能 还 
想 在 表单 域 上 提供 一 些 与 类 型 相关 的 信息 ， 如 希望 用 户 输 入 什么 类 型 的 值 。 没 问题 ， 接 下 来 的 
placeholder 属性 正好 可 以 解决 这 个 问题 。 





3.8 ”实例 5: H placeholder 属性 进行 提示 





占 位 文本 向 用 户 说 明了 他 们 应 该 如 何 填 写 页 面 上 的 表单 域 。 图 3-5 是 一 张 带 有 占 位 文本 的 注 
册 表 单 。 下 面 ， 我 们 来 搭建 它 。 
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Create New Account 










First Name 
Last Name 
Email 
Password Confirmation 


| Sign Up 


图 3-5 占 位 文本 能 够 帮助 用 户 理解 他 们 需要 输入 怎样 的 内 容 


3.3.1 简单 的 注册 表单 


AwesomeCo 的 支持 站 点 要 求 用 户 注 册 账 号 ， 其 中 最 大 的 问题 之 一 是 用 户 会 在 注册 过 程 中 多 
次 尝试 设置 安全 性 较 低 的 密码 。 下 面 ， 让 我 们 用 占 位 文本 向 用 户 说 明 密 码 的 安全 性 要 求 。 考 虑 到 
一 致 性 ， 我 们 为 其 他 表单 域 也 添加 了 占 位 文本 。 


在 各 个 输入 域 上 添加 placeholder 属性 即 可 实现 占 位 文本 ， 代 码 如 下 : 
Download htimlSplaceholdertext/index.html 


«input id="email" type-"email" 
name-"ema11" placeholder-"user&example.com"» 


KA PRA placeholder 属性 ， 整 个 表单 的 标记 代码 如 下 : 

Download htmlSplaceholdertext/index.html 

«form id="create account" action-"/signup" method="post"> 
«fieldset id-"signup"» 


«legend-»Create New Account«/legend» 
«ol» 


3.3 实例 $: 使 用 placeholder 属性 进行 提示 
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«li» 
«label forz"first name"-First Name«/label» 
«input id2"first name" type="text" 
autofocus- "true" 
name-"first name" placeholder-2"'John'"» 
«/li» 
«li» 
«label for-z"last name">Last Name«/label» 
«input id2"7ast name" type="text" 
name-"7ast name" placeholder-2"'Smith'"» 
</li> 
<li> 
«label for="email">Email</label> 
«input id-"email" type-"email" 
name- "email" placeholder- "userGexample.com"» 
«/li» 
«li» 
«label forz'"password'"»Password«/label» 
«input id2"password" type="password" name-"password" value= 
autocomplete-"off" placeholder2"8-10 characters" /> 
«/li» 
«li» 
«label forz'"password confirmation" »Password Confirmation«/label» 
«input id-"password confirmation" type="password" 
name- "password confirmation" value="" 
autocomplete-"off" placeholder-"Type your password again" /> 
«/li» 
«li»«input type="submit" value-" Sign Up"»«/li» 
«/ol» 
«/fieldset» 
</form> 


3.3.2 ”阻止 自动 完成 


可 能 你 已 经 注意 到 了 ， 我 们 在 表单 的 密码 框 上 设置 了 autocomplete 属 性 。HTML5 引 入 了 
autocomplete 属 性 , 用 以 通知 广 览 絮 不 要 为 当前 表单 域 自 动 填充 数据 。 某 些 浏 览 絮 能 够 记录 用 户 
之 前 输入 的 数据 ， 而 在 某 些 场合 下 ， 我 们 想 告知 浏览 强 我 们 不 希望 用 户 使 用 记录 数据 。 

由 于 再 次 用 到 了 有 序列 表 元 素来 组 织 表 单 域 ， 因此， 需要 添加 一 点 基础 CSS 样 式 以 让 表单 看 
起 来 更 漂亮 。 

Download htmlSplaceholdertext/style.css 


fieldset{ 
width: 216px; 
} 


fieldset olí 
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list-style: none; 
padding:0; 
margin:2px; 


} 


fieldset ol lií 
margin:0 0 9px 0; 
padding:0; 

l; 


/* ARA RAT T] 
fieldset inputí 

display:block; 
} 


现在 , Safari, Opera 和 Chrome 的 用 户 能 够 看 到 表单 域 中 的 帮助 文本 了 。, 接 下 来 , 要 让 Firefox 
和 了 IE 用户 也 能 看 到 。 


3.3.3 EIR 





借助 于 JavaScript 在 表单 域 中 放置 占 位 文本 并 不 需要 太 多 工作 量 。 用 代码 测试 每 个 表单 域 的 
value 属性 ， 如 采 为 空 则 将 其 设 为 占 位 文本 。 当 焦点 落 在 表单 域 上 时 ， 将 其 值 置 为 空 ， 而 当 表 单 
域 失 去 焦点 时 ,再 测试 一 所 value 属性 。 如 于 值 不 同 则 什么 都 不 做 ， 人 否则 ， 将 其 值 再 次 置 为 占 位 
文本 。 

SW DUI AE deaf? 3c*y placeholder 属性 的 代码 与 之 前 检测 autofocus 属性 支持 度 的 代码 





Download himlSplaceholdertext/index.html 


function hasPlaceholderSupport() { 
var 1 = document.createElement('input'); 
return 'placeholder' in 1; 


) 

接 下 来 ， 编 写 JavaScript 代码 来 处 理 相 应 逻辑 。 解 决 方案 的 基础 是 Andrew January 以 及 其 
他 一 些 人 的 工作 。 我 们 会 用 存储 在 placeholder 属性 中 的 文本 来 项 充 各 个 表单 域 的 value 属 
性 值 。 当 用 户 选 择 某 个 表单 域 时 ， 我 们 将 移 除 占 位 文本 。 让 我 们 将 上 述 逻 辑 封装 成 一 个 jQuery 
插件 ， 以 便 应 用 于 表单 。 至 于 如 何 让 插件 工作 ， 可 以 参看 本 市 随后 部 分 中 的 jQuery 插件 说 明 。 





CQ 原始 脚本 位 于 http:/www.morethannothing.co.uk/wp-content/uploads/2010/01/placeholder.jjs， 但 是 它 不 支持 IE FÆ 
码 框 。 
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Download html5placeholdertext/jqueryplaceholderjs 


Line! — (function($)( 


$.fn.placeholder = functionO (1 


5 function valuelIsPlaceholder(input)( 
return ($Cinput).val() == $Cinput).attr("placeholder")); 
Eee this.each(function() 1 
lg $Cthis).find(": input") .each(functionO 1 
if($Cthis).attr("type") == "password")í1 


- var new field = $("«input type-'text'»"); 
15 new field.attr("re]", $(this).attr("id")5); 
- new field.attr("value", $(this).attr("placeholder")); 
$Cthis).parent().append(new field); 
new field.hideO; 


20 function showPasswordPlaceHolder(input)1 
if( $Cinput).val() == "" || valueIsPlaceholder(input) ){ 
$CGnput).hideO; 
$C'input[rel2' + $(input).attr(" id") + ']').showQO; 
im 


25 pi 


new_field.focus(function(){ 
$Cthis).hideO; 

] $C'input£' + $(this).attr("re1")).show(Q) .focusQ ; 
30 133 
$Cthis).blur(functionO 1 

showPasswordPlaceHolder(this, false); 
à 12; 
35 
showPasswordPlaceHolder(this); 


telsef 


40 // Fb X RAE EA 
- // 可 选 的 reloab 参数 用 来 解决 Firefox 和 
/ / 下 缓存 域 值 的 问题 
function showPlaceholder(input, reload)í 
- ifC $Cinput).val() == "" || 
45 C reload && valueIsPlaceholder(input) ) ){ 
- $Onput).val($Cinput).attr("placeholder")); 
} 
) 


40 > 第 3 章 创建 易 用 的 Web 表单 


50 $(this).focus(Cfunction() 1 

- if($Cthis).val() == $(this).attr("placeholder")5(1 
$C(this).val(""); 

F; 
f); 


55 
$(this).blur(function(O 1 
showPlaceholder($(this), false) 
133 


60 
showPlaceholder(this, true); 
r5 
3235 


65 // 禁止 表单 提交 默认 值 
$C(this).submit(function) f 
$Cthis).find(": input") .each(functionO 1 
if($Cthis).val() == $(Cthis).attr("placeholder"))1 
$Cthis).valC""5; 
70 l 


F 
335 


75 ps 
}) (jQuery); 


这 一 插件 有 几 个 有 趣 的 地 方 ， 你 应 该 了 解 一 下 。 代 码 第 45 行 ， 如 果 表 单 域 值 为 空 或 者 用 户 
刷新 了 页 面 , 我 们 会 为 表单 域 重新 加 载 占 位 文本 。Firefox 和 其 他 一 些 浏览 器 会 持久 化 表单 中 的 数 
据 , 此 时 , 表单 域 的 值 已 被 置 成 了 占 位 文本 , 我 们 可 不 希望 用 户 意 外 地 将 占 位 文本 提交 给 服务 器 。 
因此 ， 加 载 页 面 时 ， 我 们 给 这 一 方法 传递 了 一 个 true 值 ， 见 代码 第 61 行 。 

密码 框 的 行为 与 其 他 表单 域 有 些许 差异 , 我们 需要 对 此 进行 不 同 处 理 。 看 一 下 代码 第 12 行 ， 
我 们 在 检测 文本 域 是 否 为 密码 框 ， 如 果 是 则 将 type 类 型 值 置 为 常规 的 text， 即 普通 的 文本 框 ， 
这 样 一 来 ， 显 示 的 值 将 不 再 是 星 号 。 修 改 密码 框 的 type 属性 时 ， 某 些 浏览 器 会 抛 出 异常 ， 因 此 
我 们 采用 了 更 安全 的 做 法 一 一 交 替 显 示 密 码 框 和 用 于 显示 占 位 文本 的 文本 域 。 根据 用 户 与 表单 域 
的 交互 行为 来 决定 哪个 表单 域 应 该 显示 ， 而 哪个 表单 域 应 该 隐藏 。 

上 面 这 种 方法 相当 于 hack 了 表单 中 的 域 值 ， 大 多 数 情况 下 ， 你 不 会 想 让 占 位 文本 随 着 表单 
一 起 发 送 给 服务 器 端 。 只 有 启用 了 JavaScript， 用 于 hack 占 位 文本 的 代码 才 会 生效 ， 因 此 我 们 可 
以 使 用 JavaScript 检测 表单 提交 ， 并 去 掉 那 些 与 占 位 文本 相 匹 配 的 值 。 代 码 第 66 行 ,我 们 捕获 了 
表单 提交 事件 ， 并 清空 了 输入 域 中 与 占 位 文本 相同 的 值 。 





























3.3 实例 $: 使 用 placeholder 属性 进行 提示 d 41 


jQuery 插件 


开发 人 员 可 以 通过 编写 插件 的 方式 扩展 jQuery 库 , 添 加 自 定 义 方 法 到 jQuery 函数 上 ， 
4& tFPp*T 5 jQuery 间 无 颖 整合 ,其 他 开发 人 员 引 用 了 你 的 库 后 就 能 使 用 它 了 ,下 面 是 一 
个 非常 简单 的 示例 ， 它 的 作用 是 弹出 JavaScript 的 警告 框 : 


jQuery.fn.debug = function() { 
return this.each(function() (1 
alert(this.html OQ); 
D 


如 果 你 硕 望 对 于 页 面 上 每 个 段落 都 能 弹出 警告 框 ， 则 可 像 下 面 这 样 调 用 插件 : 

?4 P ).debug() ; 
jQuery 插件 的 目的 是 遍历 一 个 jQuery 对 象 集合 ， 而 它们 返回 的 也 是 对 象 集合 ， 以 便 将 它 
们 链 在 一 起 。 例 如 ， 因 为 debug 插件 会 返回 jQuery 对 象 集合 ， 所 以 我 们 可 以 用 jQuery 
的 CSS 方法 改变 段落 文本 的 颜色 ， 并 仅 写 一 行 代码 。 

$C"p").debugO.cssC"color", "red"); 


本 书 中 ， 创 建 浏览 器 兼容 性 解决 方案 的 时 候 ， 我 们 会 多 次 用 到 jQuery 插件 来 帮助 组 织 
代码 结构 。 更 多 与 jQuery 相关 的 文档 参见 http://docs.jquery.com/Plugins/Authoring 





所 有 逻辑 均 已 封 闻 在 了 插件 中 ， 如 下 面 所 示 将 其 与 表单 绑 定 ， 我 们 即 可 在 页 面 上 调用 它 。 
Download htmli5placeholdertext/index.html 


$ (functionO (1 
function hasPlaceholderSupport() { 
var i = document.createElement( '7nput '); 
return 'placeholder' in i; 


Í 
if(!hasPlaceholderSupportO)){ 
$("#create account").placeholder(); 
//placeholder_fallback 结 
$C'input[autofocus-true] ').focus(); 
}; 
至 此 ,我 们 有 了 一 套 非 常 合 宜 的 解决 方案 , 无论 用 户 使 用 哪 种 浏览 器 ，Web 应 用 中 都 可 使 用 
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3.4 实例 6: 基于 contenteditable 属性 实现 在 位 编辑 


我 们 一 直 在 探索 如 何 简化 用 户 与 应 用 间 的 交互 过 程 。 有 时 候 ,， 我 们 希望 网 站 用 户 能 够 直接 编 
辑 一 些 信息 ， 而 无 需 使 用 额外 的 表单 ， 即 用 户 可 以 在 位 编辑 。 实 现在 位 编辑 的 传统 方法 是 监测 文 
本 区 域 上 的 单 击 事件 ， 并 将 文本 区 域 用 文本 框 进行 替换 。 随 后 ， 这 些 域 通过 Ajax 将 表单 域 中 的 
已 编辑 过 的 文本 值 传 回 服务 器 端 。 现 在 , 使 用 HTML5 的 contenteditable 属性 可 以 自动 完成 数 
据 输 入 部 分 的 工作 。 为 了 保存 编辑 过 的 数据 ,我 们 仍然 需要 编写 少量 用 于 辐 服 务 器 端 发 送 数据 的 
JavaScript 代码 ， 但 毕竟 再 也 不 用 创建 和 隐藏 可 来 回 切换 的 表单 了 。 

AwesomeCo 的 某 个 项 目 允 许 用 户 复查 自己 的 账户 信息 页 。 页 面 上 显示 了 其 名 字 、 所 在 城市 、 
所 在 州 、 邮 编 和 电子 邮件 地 址 。 接 下 来 ,我 们 就 在 这 个 页 面 上 添加 在 位 编辑 功能 ， 实 现 后 的 最 终 
效果 如 图 3-6 所 示 。 

















User information 


Name Hugh Mann 

Cit 
State OH 

Postal Code 92110 

Email boss? awesomecompany.com 


3-6 在 位 编辑 变 得 更 容易 








小 试 身 手 乙 前 ， 我 想 让 你 了 解 一 件 事 情 ， 创 建 易 访 问 的 Web 应 用 时 ， 依 赖 于 JavaScript 实现 
某 功能 , 却 不 首先 在 服务 绢 端 实现 同样 的 功能 是 不 好 的 做 法 。 示 例 中 并 未 实现 服务 颖 端 解决 方案 ， 
因为 其 目的 是 重点 说 明 contenteditable 属性 的 功能 ， 而 且 这 一 示例 代码 不 会 上 线 。 所 以 要 记 
住 ， 无 论 何 时 ， 首 先 构 建 一 个 不 依赖 于 JavaScript 的 解决 方案 ， 然 后 实现 依赖 于 JavaScript 脚本 
的 版 本 ,最 后 为 两 个 版 本 编写 自动 化 测试 代码 ， 以 便 变更 其 中 某 个 版 本 (但 不 变更 男 一 个 ) 时 更 
可 能 捕获 到 Bug, 


3.4.1 账户 表单 


HTMLS 规范 ?| 入 了 contenteditable 属性 ， 它 儿 乎 可 用 于 任何 元 素 之 上 。 只 要 添加 这 一 属 
即 可 将 其 变 成 可 编辑 区 域 。 


Download html5 content editable/show.html 





- 
M,» 


«hl»User information«/hl1» 
«div id-"status"»«/div» 
«ul» 
<li> 
<b>Name</b> 
<span id="name" contenteditable="true">Hugh Mann</span> 
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«/li» 
«li» 
<b>City</b> 
«span id-"city" contenteditable="true">Anytown</span> 
«/li» 
«li» 
«b»State«/b» 
«span id-"state" contenteditable-" true" »0H«/span» 
«/li» 
«li» 
«b»Postal Code</b> 
«span id-"postal code" contenteditable-"true"»92110«/span» 
«/li» 
«li» 
«b»Email«/b» 
«span id-z"email" contenteditable-"true"»bossQawesomecompany.com«/span» 
«/li» 
«/ul» 


我 们 还 可 通过 一 些 CSS 为 代码 添加 样式 。 我 们 使 用 一 些 CSS3 VOTE iio VA DII n] ERE DURER, 
ERA IP Fer EAH, RR PZ DOTIBUS A HEISE, 
Download html5 content editable/show.html 


Line 1 ulflist-style:none;) 
liíclear:both;j 


5  ]i»b, li»spaní 
display: block; 
float: left; 
width: 100px; 


j 
10 
li»spaní 
width:500px; 
margin-left: 20px; 
j 
15 


li»span[contenteditable-true]:hoverí 
background-color: Zffc; 
lh 


20  ]i»span[contenteditable-true]: focusí( 
background-color: £ffa; 
border: 1px shaded 7000; 
j 


前 端 代码 编写 完了 。 用 户 现在 能 够 轻而易举 地 编辑 页 面 上 的 数据 。 接 下 来 ， 编 写 用 于 保存 数 
据 的 代码 。 
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3.4. 持久 化 数据 


虽然 用 户 可 以 修改 数据 ,但 刷新 页 面 或 者 离开 当前 页 ， 修 改 后 的 数据 会 随 之 丢失 。 我 们 需要 
通过 杀 种 方法 将 修改 后 的 数据 提交 到 后 台 ， 还 是 借助 jQuery 来 实现 吧 。 如 采 以 前 使 用 过 Ajax, 
那么 你 不 会 对 下 面 的 代码 感到 陌生 。 


Download html5 content editable/show.html 


$ CfunctionO (1 
var status = $("£Zstatus"); 
$C"span[contenteditable-true]").blur(function(O 1 
var field = $(this).attr(" id"); 
var value = $(this).text(O); 
$.post("http://localhost:4567/users/1", 
field + "=" + value, 
function(data)1 
status.text(data); 
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我 们 为 每 个 contenteditable 属性 值 为 true 的 span 标签 添加 事件 监听 器 。 剩 下 的 任务 就 
是 提交 数据 到 服务 器 端 脚本 。 


3.4.3 ENR 


我 们 做 了 一 扒 事 儿 ， 但 仍 有 一 些 受众 无 法 孚 受 我 们 提供 的 服务 。 首 先 ， 将 编辑 结 抄 你 存 回 服 
25 anm ALT JavaScript， 这 不 是 一 件 好 事 。 其 次 ， 当 聚焦 于 文本 区 域 时 ， 我 们 使 用 了 focus fü 
类 来 高 亮 显 示 相 应 区 域 ， 而 菜 些 版 本 的 IE 不 文 持 focus 伪 类 。 下 面 ， 我 们 优先 处 理 功 能 性 的 问 
题 ， 然 后 再 解决 显示 效 末 问题 。 





3.4.4 ” 创 批 建 编辑 页 面 


依赖 于 JavaScript 提交 表单 可 能 会 将 某 些 用 户 挡 在 门 外 ， 而 与 过 分 考虑 多 种 解决 方案 不 同 ， 
我 们 应 该 为 他 们 提供 备 选 方案 ， 让 他 们 去 往 一 个 独立 的 表单 页 面 。 当 然 ， 工 作 量 变 大 了 ,但 是 疮 
BEATHE, RAWHA T. 


a 使 用 IE7 的 用 户 禁 用 了 JavaScript, 
a 用 户 使 用 了 不 支持 HTMLS 的 浏览 器 。 
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a 用 户 使 用 了 支持 HTMLS 的 最 新 版 本 的 Firefox， 但 还 是 禁用 了 JavaScript， 因 为 他 不 喜欢 
JavaScript。( 这 种 场景 总 是 有 的 ， 而 且 出 现 的 频率 比 你 想象 得 要 高 。) 


届时 ， 最 好 的 办 法 就 是 创建 一 个 表单 ， 用 POST 方式 将 表单 内 容 赋 给 之 前 Ajax 代码 更 新 的 
euin Ma audent 都 允许 你 检测 请 求 类 型 ， 它 们 会 查看 accept 头 部 
EERME SL POST 请求， 还 是 XMLHttpRequest ARK. iX 4EÉ—2E. WLHEDPKUERB arime 
码 的 DRY ff^, Am RU ash contenteditable 属性 和 JavaScript， 我 们 会 隐藏 用 于 跳 转 到 
表单 页 面 的 链接 。 


因此 ， 我们 创建 名 为 edit.html 的 新 页 面 ， 编 写 标准 的 编辑 表单 ， 其 POST 内 容 将 发 送 至 原先 
Ajax 版 本 的 代码 所 更 新 的 目标 。 


Download html5 content editable/edit.html 








<!DOCTYPE html» 
«html langz"en-US"- 
«head» 
«meta http-equiv-"Content-Type" content-" text/html; charset-utf-8" /> 
«title-»Editing Profile«/title» 
«link hrefz"style.css" rel="stylesheet" media-"screen'"» 
«/head» 
«body» 
«form action-z"/users/l" method="post" accept-charset-"utf-8"» 
«fieldset id-"your information"» 
«legend»Your Information«/legend» 
«ol» 


一 二、 
Sti 


«label forz"name"»Your Name«/label» 
«input type-" text" name-"name" value- 
«/li» 
«li» 
«label forz'"city"»City«/label» 
«input type="text" name-"city" value- 


Ta. 
MP. 


1d-2" name" » 


id-"city"» 


«/ 
PE 


yo forz"state"»State«/label» 
«input type="text" name-"state" value- 
«/li» 
«li» 
«label forz"postal code" »Postal Code«/label» 


«1 nput Tunac'ravr'" name-' 'anctal cendo" val A JA" 
Eh wa Ww vy 和 这 一 TUAL E m PY o CUI LVU wW VR E vwu m i wl 


«/li» 
«li» 
«label forz'"email"-Email«/label-» 


id2"state"» 


Q@ DRY 标准 即 “Don'tRepeat Yourself", pH Dave Thomas 和 Andy Hunt 在 《程序 员 修炼 之 道 》[HITI00] 一 书 中 首次 提出 。 
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«input type-"email" name-"email" valuez"" id="email"> 
«/li» 


</ol> 
</fieldset> 


<p><input type="submit" value-"Save"»«/p» 
</form> 


</body> 
</html> 


在 show.html 页 面 上 添加 一 个 链接 : 


Download html5 content editable/show.html 


«hl»User information«/hl» 
«section id-" edit profile link"» 
<p><a href-z'"edit.html"-Edit Your Profile«/a»«/p» 
«/section» 
«div id-2"status"»«/div» 


As BUR. RA DARET] v NIE BE. 74 HLDUCA SCPECE Tz SERI EUG P. 我们 会 在 隐 
着 到 编辑 页 面 的 链接 ， 并 启用 Ajax 支持 。 
Download html5 content editable/show.html 


if(document.getElementById("edit profile link").contentEditable !- null){ 


T dli EEn xfr contenteditable 属性 的 代码 。 


Download html5 content editable/show.html 


$ CfunctionO 1 
if(document.getElementById("edit profile link").contentEditable !- null){ 

$C"Zedit profile link").hideO; 
var status = $("Zstatus"); 
$C"span[contenteditable-true]").blur(functionO 1 

var field = $(this).attr(" id"); 

var value = $(this).textO; 

$.post("http://localhost:4567/users/1" , 


field + "=" + value, 
function(data)1 
status.text(data); 
} 
); 
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在 此 之 后 , 我 们 的 用 户 既 可 以 使 用 标准 界面 进行 编辑 , 也 可 以 使 用 快速 在 位 编辑 模式 。 现 在 ， 
你 已 经 知道 如 何 实 现 标 准 界 面 了 , WE, 一 定 要 优先 实现 通用 方案 。 与 其 他 的 兼容 解决 方案 不 同 ， 
如 条 设 有 实现 这 一 兼容 解决 方案 ， 部 分 功能 在 特定 场景 下 将 无 法 使 用 。 


3.4.5 ”未 来 展望 


到 此 为 止 ， 如 来 你 在 网 站 中 添加 了 基于 JavaScript 的 日 期 选择 右 ， 用 户 必须 了 解 其 用 法 。 如 
朱 有 过 在 线 购买 机 票 和 预定 旅馆 房间 的 经 历 , 那么 你 一 定 见 过 不 同 网 站 实现 的 各 不 相同 的 定制 表 
单 控件 。 类 似 于 使 用 ATM 机 ， 不 同 机 妖 的 界面 都 有 很 大 不 同 ， 会 延缓 你 的 操作 速度 。 


想象 一 下 ， 如 果 每 个 网 站 的 日 期 选择 都 使 用 HTMLS 的 date 类 型 ， 并 由 浏览 器 来 创建 展现 
界面 ,那么 用 户 无 论 访问 哪个 网 站 都 能 看 到 完全 相同 的 日 期 选择 和 如。 屏幕 阅读 软件 甚至 能 够 实现 
一 套 标 准 机 制 来 帮助 官 人 输入 日 期 。 再 芬 虑 一 种 场景 ， 如 来 到 处 邦 是 占 位 文本 和 目 动 聚焦 功能 ， 
那么 对 于 用 户 将 多 么 有 用 。 占 位 文本 能 够 帮助 屏 医 阅读 融 辣 用 户 解 释 表单 域 的 用 途 , 而 自动 聚焦 
功能 则 可 帮助 用 户 在 不 用 鼠标 的 情况 下 实现 表单 域 上 的 导航 , 它 不 仅仅 可 为 盲人 提供 便捷 ， 也 适 
用 于 那些 因 某 种 运动 障碍 而 无 法 使 用 鼠标 的 用 户 。 


开发 人 员 可 以 将 任意 元 素 转 换 成 可 编辑 区 域 , 这 使 得 实现 在 位 编辑 成 了 一 件 容 多 的 事 儿 , 但 
会 芍 在 地 改变 我 们 为 内 容 管 理 系统 构建 界面 的 方式 。 

如 今 的 Web 都 征 基于 交互 的 ， 而 表单 是 交互 过 程 中 至 关 重 要 的 一 环 。 我 们 能 够 使 用 HTMLS 
提供 的 整套 全 新 工具 来 提升 用 户 体 验 。 

















第 竹 章 
用 CSS3 打造 更 好 的 用 户 界面 


HERAA, 开发 人 员 就 在 代码 中 使 用 CSS 来 实现 所 需 的 效 末 。 他 们 曾 利 用 JavaScript 或 
服务 絮 端 代码 生成 条 纹样 式 的 表格 ， 或 聚焦 表单 并 对 表单 施加 模糊 效 霖 。 为 了 识别 出 要 为 50 个 
文本 框 中 的 哪些 添加 样式 ， 开 发 人 员 不 得 不 大 量 使 用 市 有 额外 class 属性 的 标签。 

但 征 以 后 不 用 这 样 了 ! CSS3 有 一 些 非 稍 神奇 的 页 面 元 素 选 择 华 ， 有 了 它们 ， 事 情 变 徐 单 了 。 
或 许 你 还 记得 ， 元 素 选 择 带 是 一 种 模式 ， 它 用 于 辅助 查找 HTML 文档 中 的 未 些 页 面 元 素 ， 以 便 
找 出 元 素 后 为 其 添加 样式 。 我 们 将 利用 这 些 新 的 页 面 元 素 选 择 副 演 染 表格 。 然 后 ， 再 看 下 如 何 利 
用 其 他 一 些 CSS3 特性 改进 网 站 的 CSS 打印 样式 表 ， 我 们 还 会 尝试 将 内 容 拆 分 成 多 列 。 


本 章 中 ， 我 们 会 介绍 下 面 的 CSS 特性 。 




















D :nth-of-type [p:nth-of-type(2n+1){color: red;}] 查找 某 一 特定 类 型 的 所 有 n 
AJC. [C2. F3.5, S3, IE9, 09.5, IOS3, A2] 

D :first-child [p:first-childiícolor:blue;1] 
IE9, O9.5, IOS3, A2] 

D :nth-chi ld [p:nth-ch1ld(2n«1)1color: red; 1] 
F3.5, S3, IE9, O9.5, IOS3, A2] 

D :last-chi1ild [p: last-childícolor:blue; 1] 
IE9, O9.5, IOS3, A2] 

D :nth-last-chi ld [p:nth-last-child(25)ícolor: red;}] 
38. [C2, F3.5, S3, IE9, O9.5, IOS3, A2] 

D :first-of-type [p:first-of-typeícolor:blue;1] 
[C2, F3.5, S3, IE9, 09.5, IOS3, A2] 

D :last-of-type [p:last-of-typeícolor:blue;1] 
[C2, F3.5, S3, IE9, 09.5, IOS3, A2] 





查找 第 一 个 子 元素 。[C2、F3.S、S3、 





问 后 查找 一 个 指定 的 子 元 素 。[C2、 





查找 最 后 一 个 子 元 素 。[C2、F3.5、S3、 





中 前 查找 一 个 指定 的 子 元 





查找 特定 类 型 的 第 一 个 元 素 。 





查找 特定 类 型 的 最 后 一 个 元 素 。 
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a 对 列 的 支持 [£contentf column-count: 2; column-gap: 20px;column-rule: 1px solid 
#ddccb5; }] 一 一 将 内 容 区 域 分 成 多 列 。[C2、F3.5、S3、0O9.5、IOS3、A2] 

D :after [span.weight:after { content: "lbs"; color: #bbb; 3]—— 5 content 一 起 
使 用 ， 用 于 在 指定 元 素 的 后 面 妃 加 指定 的 内 容 。[C2、F3.S、S3、IE8、09.5S、IOS3、A2] 

a 媒体 查询 [media="only all and (max-width: 480)"] 一 一 基于 设备 设置 应 用 样式 。[C3、 
F3.5, S4, IE9, OIO.1, IOS3, A2] 


4.1 实例 7: 使 用 伪 类 泻 染 表 格 


CSS 中 的 伪 类 (pesudoclass) 是 一 种 通过 文档 外 信息 或 通过 稼 规 元 素 选择 右 无 法 表达 的 信息 
查找 页 面 元 素 的 方法 。 你 可 能 已 经 使 用 过 伪 类 ， 比 如 使 用 :hover 来 改变 鼠标 大 停 在 超 链接 上 时 
链接 的 颜色 。 使 用 CSS3 中 新 的 伪 类 可 以 更 轻松 地 定位 页 面 元 素 。 


4.1.1 优化 付款 清单 样式 


AwesomeCo 用 第 三 方 清算 记 账 系统 来 管理 运输 的 物品 。AwesomeCo 最 大 的 市 场 之 一 就 是 会 
议 用 品 ， 如 笔 、 茶 杯 、 衬 衫 及 其 他 任何 能 印 上 公司 标识 的 东西 。 客 户 要 求 付 款 清 单 具有 更 强 的 可 
读 性 ， 因 此 开发 人 员 制 作 了 如 图 4-1 所 示 的 标准 HTML 表格 。 


[ item  |Price [Quantity | Total | 


4-1 当前 付 球 清 单 仅 使 用 了 未 加 入 样式 的 HTML 表格 












这 是 一 张 极为 标准 的 付款 铺 单 ， 上 面 标 有 本 次 订单 涉及 的 价格 、 数 量 、 总 计 行 ， 小 计 、 运 输 
总 费用 和 合计 总 价 。 如 采 对 相 邻 行使 用 不 同 的 颜色 显示 , 则 会 增加 可 读 性 而 为 合计 总 价 使 用 其 他 
颜色 会 更 加 突出 其 内 容 。 

表格 的 代码 如 下 。 可 以 将 下 面 的 代码 复制 到 你 的 文件 中 来 运行 。 

Download css3advancedselectors/table.html 


«table > 
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<tr> 
<th>Item</th> 
<th>Price</th> 
<th>Quantity</th> 
<th>Total</th> 

</tr> 

<tr> 
<td>Coffee mug</td> 
<td>$10.00</td> 
<td>5</td> 
<td>$50.00</td> 

</tr> 

<tr> 
<td>Polo shirt</td> 
<td>$20.00</td> 
<td>5</td> 


<td>$100.00</td> 

</tr> 

<tr> 
<td>Red stapler</td> 
<td>$9.00</td> 
<td>4</td> 
<td>$36.00</td> 

</tr> 

<tr> 
<td colspan="3">Subtotal</td> 
<td>$186.00</td> 

</tr> 

<tr> 
«td colspan="3">Shipping</td> 
<td>$12.00</td> 

</tr> 

<tr> 
«td colspan="3">Total Due</td> 
<td>$198.00</td> 

</tr> 

</table> 


首先 ， 让 我 们 去 掉 难 看 的 默认 表格 边框 : 
Download css3advancedselectors/table.css 
tablet 
width: 600px; 


border-collapse: collapse; 


j 


th, tdí 
border: none; 


j 
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然后 ， 为 表 头 略微 添加 修饰 ， 用 黑色 填充 背景 并 使 用 白色 字体 : 
Download css3advancedselectors/table.css 


thí 
background-color: #000; 
color: #fff; 

j 


应 用 样式 后 ， 得 到 如 图 4-2 所 示 的 表格 。 


Item Price Quantity Total 
Coffee mug $10.00 5 $50.00 
Polo shirt $20.00 5 $100.00 
Red stapler $9.00 4 $36.00 
Subtotal $186.00 
Shipping $12.00 
Total Due $198.00 
4-2 


简单 清理 了 表格 边框 并 调整 间距 之 后 ， 开 始 应 用 伪 类 来 演 染 行 和 列 。 先 从 条 纹 化 表格 开始 。 
4.1.2 使 用 :nth-of-type 条 纹 化 表格 的 行 


我 们 都 见 过 “斑马 纹 ” 样 式 的 表格 。 斑 马 纹 很 重要 ， 因 为 它 为 用 户 提 供 了 可 参照 的 水 平 线 。 
这 种 效果 最 好 在 表现 层 用 CSS 来 实现 。 传 统 的 做 法 是 为 表格 的 行 添加 人 额外 的 “odd (S) fH "even" 
(481) 类 名 ， 并 分 别 为 “odd” 和 “even” 类 定义 样式 。 我 们 不 想 在 表格 中 引入 额外 的 样式 类 ， 
为 HIML5 规 苑 建议 避免 那些 用 于 定义 外 观 的 类 名 。 信 助 于 新 的 选择 堪 ， 我 们 可 以 轻易 地 实现 上 
述 功 能 而 不 必 改 变 标记 结构 ， 进 而 彻底 实现 表现 层 与 内 容 的 分 离 。 











nth-of-type 选择 如 可 以 查找 茶 个 特定 类 型 中 的 第 nn 个 页 面 元 素 ， 这 可 以 通过 使 用 公式 或 天 
键 字 实现 。 因 为 关键 字 查 找 更 容易 理解 ， 所 以 我 们 将 首先 介绍 ， 而 片刻 之 后 ,我 们 再 来 详细 介绍 
如 何 用 公式 查找 页 面 元 素 。 


我 们 希望 条 纹 化 表格 中 的 行使 相 邻 的 两 行 颜色 不 同 , 那么 最 简单 的 方法 就 是 找到 所 有 侦 数 
行 ， 然 后 赋予 其 一 种 背景 颜色 。 同 样 ， 我 们 也 可 以 对 奇数 行 赋予 同一 种 颜色 。CSS3 提供 了 even 
和 odd 两 个 关键 字 来 支持 这 一 特定 的 场景 。 

Download css3advancedselectors/table.css 


tr:nth-of-type(Ceven) 1 
background-color: £F3F3F3; 

$ 

tr:nth-of-type(Codd) { 
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background-color: Zddd; 
} 


代码 中 选择 右 实 现 的 是 找到 所 有 偶数 行 ， 对 其 着 色 ， 然 后 找到 所 有 奇数 行 , 用 另 一 种 颜色 对 
其 着 色 。 这 样 就 实现 了 斑马 条 纹 ， 不 需要 额外 的 脚本 代码 ， 也 不 必 在 每 行 上 加 入 额外 的 类 名 。 
应 用 上 面 的 样式 后 ， 表 格 如 图 4-3 所 示 。 


Item Price Quantity Total 
Coffee mug $10.00 5 $50.00 
Polo shirt $20.00 5 $100.00 
Red stapler $9.00 4 $36.00 
Subtotal $186.00 
Shipping $12.00 
Total Due $198.00 
图 4-3 





下 面 ， 我 们 来 改变 表格 列 的 对 齐 方式 。 
4.1.3 ”使 用 :nth-chi1d 对 齐 列 文本 


默认 情况 下 , 表格 中 所 有 列 文本 都 是 左 对 齐 。 接 下 来 ,我 们 要 让 除 第 一 列 外 的 所 有 列 文本 都 
HAFF o 价格 列 和 数量 列 右 对 齐 后 会 更 加 清晰 , 可 增强 可 读 性 。 我 们 可 以 使 用 nth-child 来 实现 ， 
但 是 ， 站 和 完 得 学 习 一 下 如 何 使 用 它 。 

nth-child 选择 各 用 于 查找 某 元 素 的 子 元 素 ， 与 nth-of-type 类 似 ， 我 们 可 以 使 用 关键 字 或 
NT 

公式 束 是 an+b, b tm, a 是 倍数 。 没 有 上 下 文 的 情况 下 实在 是 不 好 理解 其 售 义 ， 所 以 
我 们 在 表格 上 下 文中 来 试 一 下 。 

如 条 我 们 想 选 择 所 有 行 ， 可 以 这 样 使 用 选择 奉 : 

table tr:nth-child(n) 
这 里 ， 我 们 未 使 用 任何 倍数 ， 也 未 使 用 任何 偏 移 量 。 

然而 ， 如 采 我 们 想 选 择 除了 第 一 行 RERA) 之 外 的 所 有 行 ， 可 以 使 用 偏 移 量 来 实现 : 

table tr:nth-child(n+2) 

如 采 我 们 想 跳 跃 选择 一 些 行 ， 则 可 以 使 用 倍数 ， 如 每 两 行 选择 一 行 用 2n: 


table tr:nth-chi1ild(2n) 
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如 革 每 3 行 选择 一 行 则 要 用 3n。 


同样 , 我们 可 以 使 用 偏 移 量 来 改变 起 始 行 。 下 面 这 一 选择 强 将 从 表格 的 第 四 行 开始 隔 一 行 选 





table tr:nth-child(2n+4) 
这 样 一 来 ， 我 们 可 以 改变 除 第 一 列 之 外 的 其 他 列 的 文本 对 齐 方 式 : 


Download css3advancedselectors/table.css 


td:nth-child(n«2)5í1 
text-align: right; 
j 


此 时 ， 表 格 样式 得 到 了 真正 的 改善 ， 如 图 4-4 所 示 。 


Item Price Quantity Total 
Coffee mug $10.00 5 $50.00 
Polo shirt $20.00 5 $100.00 
Red stapler $9.00 4 $36.00 
Subtotal $186.00 
Shipping $12.00 
Total Due $198.00 
4-4 





RI EE TRIER UH — £1. 


4.1.4 使 用 :1ast-chi1d 加 粗 最 后 一 行 





现在 ， 付 球 消 单 看 起 来 已 经 很 漂 融 了 了， 但 十 菜 位 经 理 厦 望 表 格 的 最 后 一 行 能 加 粗 显示 以 
使 此 行 更 加 突出 。 我 们 可 以 使 用 last-child 来 实现 ， 它 用 于 获取 一 组 元 素 中 的 最 后 一 个 子 
puc 

Web FEA HIE H RA Pe 1 ie ELA PR DAE UL MAER ER DH CS Ao, 这 种 做 法 会 寻 致 一 
组 元 素 的 最 后 出 现 多 余 的 底 边 距 。 例 如 ， 厂 段落 位 于 侧 边 栏 或 标注 框 中 ， 去掉 最 后 一 个 段落 的 底 
边 距 能 够 减少 最 后 一 段 与 容 顷 边 绿 之 旧 的 空间 浪费 。 在 此 场景 下 ，1ast-child 选择 带 是 完美 的 
选择 ， 我 们 可 以 利用 它 来 删除 最 后 一 段 的 底 边 距 : 


p{ margin-bottom: 20px } 
#sidebar p:last-child{ margin-bottom: 0; } 


我 们 再 来 用 同样 的 方法 来 加 粗 表格 的 最 后 一 行 : 
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Download css3advancedselectors/table.css 


tr:last-childí 
font-weight: bolder; 
j 


再 来 加 粗 表格 的 最 后 一 列 ， 突 出 显示 合计 总 价 列 : 
Download css3advancedselectors/table.css 
td:last-childíi 


font-weight: bolder; 
Í 


最 后 ， 我 们 还 要 把 汇总 价格 的 字体 变 大 一 些 。 借 助 last-child 选择 融 ， 我 们 可 以 找到 表格 
中 最 后 一 个 单元 格 ， 为 其 添加 下 面 的 样式 (如 图 4-5 所 示 )。 


Download css3advancedselectors/table.css 





tr:last-child td:last-childí 
font-size:24px; 


} 
Item Price Quantity Total 
Coffee mug $10.00 5 $50.00 
Polo shirt $20.00 5 $100.00 
Red stapler $9.00 4 $36.00 
Subtotal $186.00 
Shipping $12.00 
Total Due $198 .00 
图 4-5 


临近 收工 ， 但 对 于 表格 的 后 3 行 ， 还 有 几 件 事 要 做 。 
4.1.5 ”使 用 :nth-last-child 向 前 查找 元 素 


运费 有 折扣 的 时 候 ,， 我 们 希望 能 够 高 之 显示 “shipping” 行 。 可 以 使 用 nth-1ast-child 选择 
絮 快 速 定位 此 行 。 在 4.1.3 证 中 ,我 们 演示 了 如 何 使 用 nth-child 和 an+b 公式 查找 指定 的 子 元 素 。 
nth-last-child 选择 纶 的 用 法 与 nth-child 选择 器 的 用 法 几乎 完全 一 样 ， 唯 一 不 同 之 处 在 于 
nth-last-child 从 最 后 一 个 元 素 开 始 反 方 同 往 前 查找 。 正 因为 如 此 ， 用 它 来 查找 集合 中 倒数 第 
二 个 元 素 非 常 侧 单 。 也 就 是 说 ， 只 需 找 到 付款 清单 表格 的 倒数 第 二 行 即 可 。 


为 了 找到 shipping 行 ， 我 们 使 用 了 下 面 的 代码 : 
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Download css3advancedselectors/table.css 


tr:nth-last-child(2)( 
color: green; 


j 

上 述 代码 中 ， 我 们 定位 到 了 倒数 第 二 个 子 元 素 。 

我 们 还 需 对 表格 做 最 后 一 次 改进 。 之 前 ,我 们 将 除 第 一 列 以 外 的 所 有 列 都 改 为 了 右 对 齐 ， HR 
管 修 改 后 的 条 目 描述 列 和 价格 列 的 行 看 起 来 还 不 错 ， 但 是 表格 的 最 后 3 行 看 起 来 有 点 不 太 协 调 。 
接 下 来 ， 我 们 把 表格 最 后 3 行 的 内 容 设 为 右 对 齐 。 借 助 nth-last-child 选择 器 的 公式 ， 我 们 可 
以 实现 这 个 功能 ， 方 法 是 为 公式 中 的 n 取 负 值 并 为 a 取 正 值 ， 代 码 如 下 : 


Download css3advancedselectors/table.css 





tr:nth-last-child(-n+3) tdí 
text-align: right; 
} 


可 以 把 它 理 解 为 一 个 范围 选择 器 。 我 们 使 用 了 nth-1ast-chi1d， 使 它 偏 移 3， 意 味 着 选择 
偏 移 元 素 之 前 的 所 有 元 素 。 如果 使 用 nth-chi1d, 则 这 个 公式 会 选择 从 偏 移 开 始 的 后 面 所 有 元 素 。 


应 用 了 新 样式 的 表格 如 图 4-6 所 示 ， 看 起 来 好 多 了， 而 且 我 们 没有 改动 任何 基础 代码 。 实 现 
中 用 到 的 诸多 元 素 选 择 背 疝 无 法 在 卫 下 使 用 ， 因 此 我 们 需要 为 此 找到 解决 方案 。 











Item Price Quantity Total 
Coffee mug $10.00 5 $50.00 
Polo shirt $20.00 2 $100.00 
Red stapler $9.00 4 $36.00 
Subtotal $186.00 
Shipping $12.00 
Total Due $198.00 


4-6 添加 样式 后 的 表格 ， 完 全 使 用 CSS3 实现 的 斑马 纹 和 对 齐 方式 


4.1.6 EIR 


最 新 版 本 的 Opera, Firefox, Safari 和 Chrome 版 本 都 能 识别 这 些 元 素 选 择 绢 ， 但 是 IES.0 及 
之 前 的 版 本 会 完全 忽略 它们 。 为 此 ， 你 需要 准备 一 套 合 适 的 兼容 解决 方案 。 


4.1.7 ”修改 html 代 码 


对 于 训 览 右 不 兼容 的 问题 ， 最 第 见 且 处 处 有 效 的 解决 方案 就 古 修改 底层 代码 。 我们 可 以 为 表 
中 各 个 单元 格 部 赋予 类 样式 ， 然 后 对 每 个 类 样式 进行 CSS 定义 。 这 候 怕 是 最 糟 料 的 解决 方案 了 ， 
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它 会 导致 表 现 层 和 内 容 完 全 混在 一 起 ， 而 之 所 以 使 用 CSS3 也 恰恰 是 为 了 尽量 避免 这 样 的 问题 。 
菜 天 不 再 需要 额外 的 标记 时 ， 去 挥 它 也 将 是 一 项 痛 圳 的 工作 。 


4.1.8 使 用 JavaScript 


jQuery 库 能 够 识别 我 们 用 到 的 大 部 分 CSS3 元 素 选 择 器 , 因此 快速 编写 jQuery 方法 也 能 为 表 
格 添加 样式 。 但 是 ， 还 有 更 简单 的 方法 。 

Keith Clark 写 了 一 个 很 棒 而 且 和 倘 洁 的 库 IE-CSS3^, [fi IE Du ha as HT LACE CSS3 的 元 素 选 择 
器 了 。 我 们 需要 做 的 只 是 在 页 面 中 添加 一 些 脚 本 。 


IE-CSS3 库 可 以 使 用 jQuery、Prototype 或 者 其 他 库 ， 但 是 我 更 喜欢 用 DOMAssistant JE", 
为 这 个 库 对 此 处 使 用 的 伪 类 支持 得 最 好 。 


下 载 这 些 库 ， 然 后 链接 它们 到 你 的 文件 中 。 因 为 此 兼容 方案 仅 针对 卫 ， 因 此 ， 可 以 把 相关 
逻辑 都 放 在 一 个 条 件 分 支 中 ， 使 其 只 在 用 户 使 用 正 浏 览 副 时 生效 。 
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<!--[if (gte IE 5.55)&(lte IE 8)]» 
«script type-"text/javascript" 
src-"js/DOMAssistantCompressed-2.8.js"»«/script» 
«script type-"text/javascript" 
src-"js/ie-css3.js"»«/script» 
«l[endif]--» 


将 代码 放 在 页 面 中 即 可 实现 对 下 的 兼容 ， 效 末 可 以 参考 图 4-7, 








w dvo (Arabe 2- DD- A 
Item Price Quantity Total 

Coffee mug $10.00 5 $50.00 
Polo shirt $20.00 5 $100.00 
Red stapler $9.00 4 $36.00 
Subtotal $186.00 

Shipping $12.00 

Total Due $198.00 





4-7 TE A ar HRILA R 


RAF RA E236] JavaScript 的 文 持 ， 表 格 的 样式 才 会 有 助 于 内 容 的 可 读 性 。 不 过 ， 即 使 没 
有 样式 的 滨 染 ， 也 不 会 妨碍 用 户 查 看 清单 的 内 容 ， 只 是 不 美观 。 





(QD 参见 http://www.keithclark.co.uk/labs/1e-css3/, 
© 参见 http://www.domassistant.com/, 
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用 CSS3 演 染 页 面 元 素 非 常人 简便 , 尤其 是 当 我 们 无 法 改变 HTML 结构 时 。 无需 添 加 额外 的 标 
记 ， 仪 利用 语义 层 和 新 的 元 素 选 择 右 即 可 演 染 页 面 元 素 ， 你 会 发 现代 码 变 得 更 易于 维护 了 。 


4.2 实例 8: 使 用 :after 和 content 支持 打印 页 面 上 的 链接 


CSS 不 仅 可 以 泻 染 已 经 存在 的 元 素 ， 还 可 以 同文 档 中 注入 内 容 。 茶 些 情况 下 需要 使 用 CSS 
实现 内 容 生 成 , 最 典型 的 情况 莫 过 于 在 用 户 打印 网 页 时 , 在 链接 文本 描述 的 后 面 妃 加 超 链接 URL 
地 址 。 在 屏 硕 上 六 贤 文档 时 ， 当 妃 标 世 停 在 链接 上 时 ， 状 态 栏 会 显示 链接 指 癌 哪个 页 面 。 但 是 ， 
当 我 们 查看 网 页 的 打印 输出 时 ， 却 完全 看 不 出 链接 指 癌 哪 里 。 


AwesomeCo 正在 开发 一 个 关于 服务 条 于 的 新 页 面 ， 重 构 团 队 中 的 一 名 成 员 每 次 部 要 将 整个 
网 站 打印 下 来 。 他 和 希望 能 够 清楚 地 知道 每 一 个 链接 都 指 癌 哪里 ， 以 便 决 定 古 否 做 出 调整 。 只 需要 











一 点 CSS 代码 ， 就 可 以 满足 他 的 愿望 ， 而且 可 以 使 之 在 下 8、Firefox、Safari 和 Chrome j| Si zs P 


正常 工作。 至 于 IE6 和 IE7， 我 们 得 略 施 JavaScript 小 计 。 


现在 ， 页 面 上 除了 一 排 链 接 喻 也 没有 。 最 后 ， 我 们 会 将 其 放 入 模板 中 。 


Download css3 print links/index.html 


«ul» 
«li» 
«a hrefz'"travel/index.html"»Travel Authorization Form«/a» 
«/li» 
«li» 
«a href-"travel/expenses.html"»Travel Reimbursement Form«/a» 
«/li» 
«li» 
«a href-z'"travel/guidelines.html"»Travel Guidelines«/a» 
«fli» 
«/ul» 


«/body» 
如 果 查 看 页 面 的 打印 输出 结果 ,你 完全 不 会 知道 链接 都 指向 哪里 , 接 下 来 让 我 们 搞定 这 个 问题 。 
4.2.1 使 用 CSS 


为 页 面 添 加 样式 表 时 ， 我 们 可 指定 样式 所 适用 的 媒体 类 型 。 多 数 情 况 下 ， 我 们 使 用 screen 
类 型 。 然 而 ,我 们 可 选择 print 类 型 来 定义 样式 表 的 应 用 玫 围 , 使 其 仅 在 页 面 打印 时 (或 者 打印 
TULIT) 加 载 生效 。 
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Download css3, print links/index.html 


«link rel="stylesheet" href="print.css type="text/css" media-"print"» 
接 下 来 创建 依循 如 下 规则 的 print.ess 文件 : 


Download css3 print links/print.css 


a:after { 
content: " (" attr(href) ") '"; 
} 


XENA Ui ERA ERRE, ACE REA EREA FA ER SA href 属性 
值 。 使 用 时 新 浏览 融 打 印 页 面 时 ， 打 印 结 来 如 图 4-8 所 示 。 


Forms and Policies 


e Travel Authorization Form (travel/index.html) 


e Travel Reimbursement Form (travel/expenses html) 
eT | Guideli "raveliouideli html) 
图 4-8 





如 东 仅 想 看 到 打印 后 的 效 末 而 不 实际 在 纸 上 打 印 出 来 ,可 以 使 用 训 贤 右 的 打印 预 蜗 功能 , TT 
F[ PO S TE IRTEE RUE 1X — 3T ERE RE 


示例 中 的 样式 会 在 除 下 6 和 ID7 ASNA AE as EH. 下面 ， 让 我 们 来 解决 IE6 和 IE7 的 问 


IE 浏览 器 支持 一 对 JavaScript 事件 onbeforeprint 和 onafterprint， 我 希望 所 有 浏览 器 都 
可 以 支持 它们 。 基 于 它们 ， 我 们 可 以 在 打印 操作 被 触发 时 修改 超 链接 的 文本 ， 并 在 打印 结束 时 ， 
将 超 链 接 的 文本 改 回 之 前 的 内 容 。 用 户 是 不 会 注意 到 有 什么 不 同 的 。™ 


我 们 只 需 创建 printjs 文件 ， 编 写 如 下 代码 : 


Download css3 print links/print.js 


Linel — $(CfunctionO { 
if (window.onbeforeprint !-- undefined) { 
window.onbeforeprint = ShowLinks; 
window.onafterprint = HideLinks; 


@ 关于 此 项 技术 的 概述 可 访问 http://beckelman.net/post/2009/02/16/Use-jQuery-to-Show-a-Linke28099s-A ddress-A fter- 
its-Text- When-Printing-In-IE6-and-IE7.aspx , 


4.2 实例 8: 使 用 :after 和 content 支持 打印 页 面 上 的 链接 - 59 


5 
= J); 
function ShowLinks() { 
- $("a").each(function() { 
10 $Cthis).data("TinkText", $(this).textO); 
- $Cthis).append(" (" + $(this).attr("href") + ")"); 
Jd: 
I 


15 function HideLinks() ( 
$C"a").eachCfunction(O) { 
$(this).text($(this).data("TinkText")); 
12; 
} 


接着 ,在 页 面 中 引用 printjs 文件 。 因 为 引用 它 仅 征 为 了 兼容 IE6 和 IE7， 所 以 我 们 把 相应 地 
辑 放 在 条 件 分 支 中 。 这 一 代码 需要 jQuery 的 文 持 ， 为 此 ， 页 面 还 需要 应 用 jQuery E, 


Download css3 print links/index.html 


«script 
charset- "utf-8" 
src-'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' 
type-'text/javascript'» 
«/script» 
<!--[if Ite IE 7]» 
«script type-"text/javascript" src-"print.js"»«/script» 
«![endif]--» 
</head> 
<body> 
<hl>Forms and Policies</hl> 


<ul> 
<li> 
«a href="travel/index.html">Travel Authorization Form</a> 
/1l- 


</ii> 
<11> 
«a href="travel/expenses.html">Travel Reimbursement Form</a> 
«/li» 
«li» 
«a href-z'"travel/guidelines.html"»Travel Guidelines«/a» 
«/li» 


«/ul» 


引用 printjs Xia, dA Tl TEE S Ro Sas PIED UL ERJSEBS URL 了 。 我 们 可 以 对 打 
印 样 去 文 件 进 行 修 改 ， 使 其 仅 应 用 于 网 站 中 的 某 些 链接 ， 而 不 再 对 页 面 上 的 所 有 链接 生效 。 
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4.3 ”实例 9: 创建 多 列 布局 


印刷 行业 使 用 多 列 排版 已 经 好 多 年 了 , 网 页 设计 师 也 非常 青睐 这 种 排版 模式 。 罕 栏 更 适 于 读 
者 阅读 ， 随 着 显示 区 域 变 得 越 来 越 宽 ， 开 发 人 员 也 一 直 在 找寻 合适 的 列 宽 。 年 竞 ， 与 在 整 页 报纸 
上 一 行 一 行 的 阅读 相 比 , 谁 也 不 愿意 在 显示 如 上 从 左 到 右 的 查看 多 行文 本 。 在 过 去 的 十 年 中 ， 出 
现 过 一 些 巧 妙 的 解决 方案 来 应 对 此 问题 , 但 古 没 有 一 个 解决 方案 可 以 像 CSS3 规范 提供 的 方法 那 
样 便 单 易 懂 。 


4.3.1 分 栏 


AwesomeCo 每 个 月 都 会 出 版 一 份 人 简报 发 给 员工 。 公 司 使 用 了 流行 的 Web 电子 邮件 系统 。 基 
于 电子 邮件 的 人 简报 并 不 漂亮 而 且 难 于 维护 。 公 司 曾 决定 将 简报 放 在 内 网 的 网 站 上 , 并 计划 通过 电 
子 邮 件 将 简报 的 链接 发 送 给 所 有 员工 。 简 报 的 页 面 原型 如 图 4-9 所 示 。 





AwesomeCo Newsletter 


Volume 3, Issue 12 


News From The Director 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint Being Awesome 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


: . "Lorem ipsum dolor sit amet, 
Quick Bits of Awesome consectetur adipisicing elit, sed 
do eiusmod tempor incididunt 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna — ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. — aliqua. Ut enim ad minim 


veniam." 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


Birthdays 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum. 


Send newsworthy things to newsC&awesomeco.com. 


4-9 ”单列 的 简报 太 宽 了 ， 难 以 阅读 


宣传 部 门 的 新 主管 有 印刷 行业 的 工作 背景 ,她 要 求 简报 看 起 来 更 像 真正 的 报纸 , 使 之 分 两 栏 
而 不 是 一 栏 显示 内 容 。 


如 条 你 答 试 过 用 div 加 浮动 的 方式 实现 文本 多 栏 显示 , 就 会 理解 这 种 做 法 的 难处 。 其 最 大 的 
问题 在 于 需要 手工 确定 拆 分 文本 的 位 置 。 在 排版 软件 (An InDesign) 中 ,我 们 可 以 将 文本 框 “ 链 
接 ” 起来, 以 便当 一 个 文本 框 被 内 容 填 满 的 时 候 , 文本 会 进入 与 之 相 “ 链 接 ” 的 文本 区 域 。 目 前 ， 
Web 领域 疝 无 类 似 的 实现 机 制 ， 但 有 其 他 简单 易 用 的 方法 。 我们 可 以 取 某 个 页 面 元素 , 拆 分 其 内 
容 为 多 列 ， 使 每 一 列 具 有 相同 的 宽度 。 
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编写 简报 所 需 的 标记 都 是 相当 基础 的 HTML 代码 。 因 为 简报 内 容 会 在 写 好 后 变动 ， 所 以 在 
简报 还 没有 正式 发 布 前 ， 先 用 占 位 文本 来 代替 其 真实 内 容 。 你 可 能 会 疑惑 为 什么 我 们 不 使 用 
section 等 新 的 HTMLS 标签 来 实现 ， 这 是 因为 在 正 训 览 袁 中 ， 我 们 的 兼容 方案 无 法 与 乙 兼 容 。 


Download css3columns/condensed newsletter.html 





«body» 
«div id-"header"'» 
«hl»AwesomeCo Newsletter«/hl1l» 
«p»Volume 3, Issue 12</p> 
«/div» 
«div id-"newsletter'"» 
«div id-'"director news" 
«div» 
«h2»News From The Director«/h2» 
«/div» 
«div» 
«p» 
Lorem ipsum dolor... 
«/p» 
«div class= "callout > 
<h4>Being Awesome</h4> 
«p» 
&quot;Lorem ipsum dolor sit amet...&quot; 
«/p» 
«/div» 
«p» 
Duis aute irure... 
«/p» 
«/div» 
«/div» 


«div id-z"awesome bits"» 
«div» 
«h2»Quick Bits of Awesome«/h2» 
«/div» 
«div» 
«p» 
Lorem ipsum... 
«/p» 
«p» 
Duis aute irure... 
«/p» 
«/div» 
«/div» 


«div id-"birthdays"» 
«div» 
«h2»Bi rthdays«/h2» 
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«/div» 
«div» 
«p» 
Lorem ipsum dolor... 
«/p» 
«p» 
Duis aute irure... 
«/p» 
«/div» 
«/div» 


«/div» 
«div id-"footer"» 
<h6>Send newsworthy things to 


«a hrefz'"mailto:newsQaweseomco.com"»newsQawesomeco.com«/a». 


«/h6» 
«/div» 
«/body» 


改 为 两 列 显示 仅 需 要 添加 如 下 代码 到 样式 表 中 : 


Download css3columns/newsletter.html 


#news lettert 
-moz-column-count: 2; 
-webkit-column-count: 2; 
-moz-column-gap: 20px; 
-webkit-column-gap: 20px; 
-moz-column-rule: 
-webk1t-column-rule: 


} 


4-10 所 示 的 效 末 看 起 来 更 好 了 。 我 们 可 以 为 其 加 入 更 多 的 内 容 ， 议 览 絮 会 
时 动 在 列 劳 边 而 不 是 包含 在 列 里 。 


匀 地 分 列 折 行 。 注 意 ， 浮 动 的 元 素 仍然 商 


lpx solid #ddccb5; 
lpx solid #ddccb5; 





会 目 动 判断 如 何 均 


AwesomeCo Newsletter 


Volume 3, Issue 12 


News From The Director 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. 


Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id 
est laborum. 


Quick Bits of Awesome 


Being Awesome 


"Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed 
do eiusmod tempor incididunt 
ut labore et dolore magna 
aliqua. Ut enim ad minim 
veniam." 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 


veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. 


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum. 


Birthdays 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. 


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum. 


Send newsworthy things to news awesomeco.com. 


4-10 两 列 的 简报 


43 实例 9: 创建 多 列 布 局 - 63 


WW/ 小 乔 爱问 
x 可 以 为 各 列 设 定 不 同 的 宽度 吗 ? 


不 行 。 每 列 宽 度 必 须 相 同 。 起 初 ， 我 也 觉得 有 些 奇 怪 ， 所 以 在 写 这 本 书 的 时 候 ， 我 对 着 
规范 又 确认 了 一 次 ， 确 实 没 有 地 方 可 以 设置 多 种 列 宽 。 

不 过 ， 对 比分 栏 的 传统 用 法 来 看 ， 这 就 不 足 为 夺 了 。 与 表格 不 同 ， 列 栏 的 作用 本 不 是 实 
现 简 化 版 的 网 站 侧 边 栏 。 分 栏 显示 是 为 了 让 读者 在 阅读 大 篇 幅 的 文章 时 更 容易 一 些 , 而 等 宽 
列 是 最 合适 不 过 的 选择 。 





4.3.2” 回 退 


IE8 及 其 以 下 版 本 不 支持 CSS3 的 分 栏 显示 ， 所 以 我 们 使 用 jQuery 的 Columnizer 插件 "来 实 
现 兼 容 方案 。 借 助 Columnizer 插件 ， 我 们 可 以 把 内 容 均 匀 地 拆 分 为 多 列 ， 代 码 如 下 : 

Download css3columns/newsletter.html 

$C72newsletter").columnize(( columns: 2 1); 

没有 开启 JavaScript 支持 的 用 户 只 能 看 到 单列 显示 的 文本 内 容 , 但 他 一 样 可 以 阅读 内 容 , 因为 
与 显示 内 容 相 关 的 标签 是 以 线性 方式 组 织 的 , 所 以 代码 适用 于 这 种 场景 。 我 们 可 以 通过 JavaScript 
检测 浏览 侨 是 否 支 持 特定 元 素 。 如 条 检索 已 存在 的 CSS 属性 ， 则 返回 布尔 值 true 。 如 采 返 回 值 
是 nu11， 则 说 明 相应 的 CSS 属性 不 可 用 。 





Download css3columns/newsletter.html 


«script 
charset-"utf-8" 
src-'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' 
type-'text/javascript'» 

«/script» 


«script 
charset-"utf-8" 
src-"javascripts/autocolumn.js" 
type-'text/javascript'» 
«/script» 


(D 参见 http://welcome.totheinter.net/columnizer-jquery-plugin/, 
© 原文 此 处 为 “返回 空 字符 串 ”， 但 根据 代码 ， 返 回 值 应 为 布尔 值 true。 一 一 译 者 注 
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«script type-"text/javascript"» 
function hasColumnSupport (O1 
var element = document.documentElement; 
var style = element.style; 
if (style){ 


return typeof style.columnCount == "string" || 
typeof style.MozColumnCount == "string" || 
typeof style.WebkitColumnCount == "string" || 
typeof style.KhtmlColumnCount == "string"; 
f 
return null; 
j 
$(function (1 


ifC!hasColumnSupport O91 
$C2newsletter").columnize(( columns: 2 15; 
} 
DEI 


«/script» 


TE A, di XE CEA ES Mbz NS MARDE, MEHE. 


刷新 一 下 了 正 训 览 合 ， 可 以 看 到 两 栏 简 报 的 效 末 。 如 图 4-11 所 示 , 页 面 看 起 来 也 许 还 不 完美 ， 
所 以 需 使 用 CSS 或 JavaScript 调整 看 上 去 不 协调 的 元 素 ， 这 些 问 题 我 留 给 你 来 处 理 。 参 考 4.1.8 
贡 中 的 条 件 语句 ， 我 们 能 够 针对 特定 版 本 的 LE DU SU ds CRETA ARE, 


[^1 d Æ AwesomeCo Newsletter t z pi 


- dh ~ |} Page ~ (7) Tools ~ 
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News From The Director enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do emsmod 


tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
commodo consequat. culpa qui officia deserunt mollit anim id est laborum. 

Duis aute irure dolor inreprehenderitài Being Awesome Birthdays 

voluptate velit esse cillum dolore eu 

fugiat nulla pariatur. Excepteur sint "Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod 


occaecat cupidatat non proident. suntin ^ consectetur adipisicing elit, sed tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
culpa qui officia deserunt mollit anim id à5 eiusmod tempor incididunt ut veniam, quis nostrud exercitation ullamco laboris aisi ut aliquip ex ea 
est laborum. labore et dolore magna aliqua. commodo consequat. 
Ut enim ad minim veniam." 
Quick Bits of Awesome Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eismod culpa qui officia deserunt mollit anim id est laborum. 
tempor incididunt ut labore et dolore magna aliqua. Ut 


Send newsworthy thing: to newsizawesomeco com. = | 





4-11 卫 训 览 侣 的 效 末 ， 但 疝 需 进行 细微 调整 











把 文章 分 为 多 栏 显示 会 提高 文 草 的 易 读 性 。 不 过 ,文章 较 长 时 ， 用 户 可 能 不 喜欢 每 次 还 要 拖 
回 最 上 方才 能 阅读 下 一 栏 。 因 此 ， 请 小 心 使 用 分 栏 。 
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4.4 实例 10: 使 用 媒体 查询 构建 移动 设备 界面 


很 早 以 前 ， 我 们 就 可 以 针对 特定 媒体 定义 其 样式 表 ， 但 正如 在 4.2 节 所 讲述 的 那样 ， 定 义 打 
印 样式 表 时 ， 输 出 的 类 型 会 受到 限制 。CSS3 的 媒体 查询 "允许 开发 人 员 根据 访客 所 用 屏幕 的 尺寸 
来 调整 页 面 的 泻 染 效果 。 一 直 以 来 ，Web 开发 人 员 使 用 JavaScript 探测 用 户 屏幕 尺寸 , 进而 获取 与 
用 户 屏幕 尺寸 相关 的 信息 。 现 在 ,同样 的 行为 仅 需 设置 样式 表 即 可 。 媒 体 查询 能 够 检测 如 下 内 容 ， 

a 分 辩 率 ， 

a 方向 (纵向 或 者 横向 模式 )， 

设备 的 宽度 和 高 度 ， 

a 浏览 器 窗口 的 宽度 和 高 度 。 

基于 上 面 的 描述 ， 使 用 媒体 查询 可 以 更 轻松 地 创建 出 适用 于 移动 用 户 的 可 切换 样式 表 。 


AwesomeCo 的 员工 大 多 弃 黑 每 手机 转投 了 了 iPhone。 对 于 2.1 证 的 内 容 , 市 场 部 主管 会 乐于 看 
到 博客 模板 的 iPhone 版 本 ， 而 其 实现 起 来 很 容易 。 

目前 ， 博 客 是 两 列 布局 ， 有 一 个 主 内 容 区 域 和 一 个 侧 边 栏 。 增 加 博客 页 面 在 iPhone 上 可 读 
性 的 最 简单 方式 是 移 除 浮动 的 元 素 ， 使 侧 边 栏 “ 掉 落 到 ” 主 内 容 区 域 的 下 方 。 这 样 一 来 ,读者 就 
不 必 在 设备 上 癌 侧 面 滚动 内 容 区 了 。 

















W 小 乔 爱 问 ……… 
亏 ” 什 么 是 手持 媒体 类 型 ? 

手持 媒体 类 型 的 设计 初 囊 是 让 我 们 可 以 像 操纵 打印 机 那样 操纵 移动 设备 , 只 不 过 大 
部 分 移动 设备 布 望 展现 “真实 的 网 络 ”， 因 此 ， 它 们 会 忽略 媒体 类 型 ， 取 而 代 之 的 是 将 
输出 样式 表 与 screen 媒体 类 型 相关 联 。 


为 了 实现 上 述 功能 ， 需 要 在 博客 样 云 表 的 最 后 加 入 以 下 代码 : 
Download css3mediaquery/style.css 


(media only screen and (max-device-width: 480px) { 
bodyt 
width:460px; 
Í 


(D 参见 http://www.w3.org/TR/css3-mediaqueries/, 
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section#sidebar, section#postst{ 
float: none ; 
width: 10096; 
Í; 
} 


你 可 以 认为 媒体 查询 大 括号 里 的 代码 是 其 日 里 的 样式 表 ， 当 查询 条 件 满足 时 ， 就 会 被 触发 。 
示例 中 ， 我 们 重新 定义 了 页 面 body 元 和 素 的 样式 ， 并 且 将 原来 的 两 列 显 示 改 为 了 单列 显示 。 

关联 样式 表 时 ， 同 样 可 以 使 用 媒体 查询 ， 我 们 将 移动 设备 的 样式 表 置 于 单独 的 文件 中 ， 代 码 
AW P: 


«link rel="stylesheet" type="text/css" 
href="CSS/mobile.css" media-"only screen and (max-device-width: 480px)"» 


现在 ,博客 在 iPhone 上 的 可 读 性 大 大 地 提高 了 。 使 用 媒体 查询 的 方式 来 为 其 他 显示 设备 ( 比 
如 目 助 式 服务 一 体 机 、 平 板 电 脑 和 其 他 任意 尺寸 的 显示 设备 ) 制作 样式 表 ， 让 你 的 内 容 在 更 多 设 
备 上 具有 民 好 的 可 读 性 。 





4.4.1 ENR 


Firefox、Chrome、Safari、Opera 和 了 IE9 都 支持 媒体 查询 。 你 需要 依赖 于 JavaScript 兼容 解决 
方案 来 应 对 不 兼容 的 情况 ， 基 于 用 户 的 设备 加 载 额外 的 样式 表 。 此 处 示例 是 针对 iPhone 的 ， 所 
以 我 们 不 需要 兼容 方案 ， 因 为 即使 不 用 媒体 查询 ， 内 容 依然 可 读 。 

不 过 ， 如 果 你 想 看 一 下 媒体 查询 在 其 他 浏览 器 上 的 效果 ， 有 一 个 jQuery 插件 ”可 供 选 择 ， 它 
为 其 他 浏览 絮 提 供 了 对 基本 媒体 查询 的 支持 。 这 一 插件 仅 支 持 引 用 外 部 样式 表 的 方式 , rf HOC 
持 以 像素 为 单位 的 min-width FH max-width, 尽管 存 在 诸多 的 限制 , 对 于 窗口 尺寸 不 一 的 界面 来 
说 也 非常 好 用 。 

4.4.2 ”未 来 展望 

本 草 中 ， 我 们 讨论 了 用 于 改进 用 户 界 面 的 内 容 ， 但 如 果 客 户 端 的 浏览 絮 不 支持 这 些 新 特性 ， 
用 户 还 是 能 够 照常 工作 。 例 如 ， 表格 没有 条 纹 时 ， 用 户 仍 然 可 以 看 到 表格 的 内 容 ， 页 面 元 素 没 有 
HAH, RAEAN, 简报 没有 以 多 栏 显 示 时 ， 用 户 仍 然 可 以 阅读 它 。 我 们 可 在 表现 层 解决 上 
述 效 果 问 题 ， 而 不 需要 借助 于 JavaScript 或 服务 絮 端 的 解 岂 方案， 这 是 一 件 好 事 。 

目前 ， 除 了 IE 以 外 ， 儿 乎 所 有 的 训 览 颖 都 支持 文中 介绍 的 元 素 选 择 右 。 随 着 技术 的 普及 ， 
将 来 IE 也 会 添加 对 其 的 支持 ， 尤 其 是 对 伪 类 的 支持 。 当 规范 变 成 终 稿 时 ， 如 moz 和 webkit- 等 
特定 的 前 级 也 会 随 之 消失 。 那 时 ， 你 就 可 以 去 挥 实现 兼容 方案 的 代码 了 。 








QD 参见 http://plugins.jquery.com/project/MediaQueries。 
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HTMLS 中 的 很 多 新 元 素 都 可 以 帮助 我 们 更 准确 地 描述 内 容 。 在 第 三 方程 序 解析 我 们 的 代码 
时 ， 这 点 显得 尤为 重要 。 例 如 ， 有 人 使 用 屏幕 阅读 软件 将 屏幕 上 的 图 像 内 容 翻 译 成 文本 并 且 大 
声 郎 读 出 来 。 屏 幕 阅 读 软 件 通 过 解析 屏幕 上 的 文本 和 标记 来 识别 其 中 的 链接 、 图 片 和 其 他 元 素 。 
尽管 屏幕 阅读 软件 已 经 有 了 令 人 称奇 的 进步 , 但 仍然 赶不上 当今 趋势 。 一 方面 ,页面 上 的 一 些 动 
态 区 域 往往 难以 检测 ， 像 轮 询 或 者 Ajax 请 求 等 都 会 改变 页 面 上 的 内 容 。 另 一 方面 ， 对 于 更 复杂 
的 页 面 来 说 ， 由 于 屏幕 阅读 絮 需 要 朗读 大 量 内 容 ， 所 以 语音 麟 贤 也 很 难 做 到 。 

富 因特网 应 用 的 可 访问 性 (WIA-ARIA ) 规范 提供 了 若干 方法 来 提高 网 站 尤其 是 Web 应 用 
的 可 访问 性 。 对 于 在 开发 中 使 用 了 JavaScript 和 Ajax 的 应 用 来 说 ， 它 会 非常 有 用 。WIA-ARIA Hl 
范 的 一 部 分 内 容 已 经 被 纳入 到 了 HTMLS 规范 中 ， 剩 下 的 部 分 仍然 独立 并 形成 对 HTMLS 规范 的 
补充 。 许 多 屏幕 阅读 软件 已 经 开始 使 用 WIA-ARIA 规范 的 功能 了 ， 比 如 JAWS, WindowEyes, 
其 至 Apple 的 内 置 VoiceOver 功能 。WIA-ARIA 还 引入 了 额外 的 标记 ， 为 辅助 技术 提示 页 面 上 的 
可 更 新 区 域 。 


本 革 ， 我 们 将 看 到 如 何 使 用 HTMLS 来 提升 使 用 辅助 装置 的 残障 用 户 的 访问 体验 。 最 重要 
的 是 ， 本 全 介绍 的 技术 不 需要 实现 兼容 性 支持 ， 因 为 现在 多 数 的 屏 大 阅读 软件 部 已 采用 了 这 些 
技术 。 


其 中 部 分 技术 如 下 所 示 。 






































a role 属性 [<div role2"document"»] 问 屏 幕 阅读 絮 说 明 某 元 素 的 用 途 。[C3、F3.6、S4.、 
IE8、09.6] 
a aria-live [<div aria-1ive="polite">] 一 一 标识 一 个 可 能 会 被 Ajax 等 技术 自动 更 新 的 


区 域 。[F3.6 (Windows), S4, IES] 


(D 参见 http://www.w3.org/WAJT/ntro/aria.php, 
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D aria-atomic [<div aria-live-"polite" aria-atomic="true">] 一 一 标识 某 动 态 区 域 的 
陪读 方式 ， 即 阅读 全 部 内 容 还 是 只 陪读 发 生 了 改变 的 内 容 。[F3.6 (Windows), S4, IE8] 


5.1 实例 11: A ARIA 角色 提供 导航 提示 





大 部 分 网 站 的 基本 结构 都 类 似 , 包括 一 个 头 部 、 一 个 导航 区 域 、 一 些 页 面 主要 内 容 和 一 个 尾 
部 。 这 些 网 站 就 像 批 量 生产 出 来 的 一 样 ， 代 人 码 也 基本 相同 。 不 过 浆 端 也 显现 出 来 了 ， 这 意味 着 屏 
幕 阅读 各 必须 按照 特定 顺序 天 读 网 站 的 内 容 。 由 于 大 部 分 网 站 的 不 同 页 面 都 有 相同 的 头 部 和 导 
航 ， 用 户 访问 不 同 页 面 时 必须 听 完 每 个 页 面 上 这 些 相 同 的 内 容 。 

推 存 的 解决 方案 是 ， 提 供 一 个 隐藏 的 “ 跳 过 导航 ”链接 ， 让 屏幕 陪读 套 明 读 出 来 。 此 链接 指 
问 靠 近 主 内 容 区 域 的 一 个 铺 。 不 过 此 功能 并 非 内 置 的 , 而 且 不 是 所 有 开发 人 员 都 懂得 (或 者 记得 
住 ) 它 的 实现 方式 。 

借助 HTMLS 的 新 属性 role, 开发 人 员 可 以 设置 各 个 元 素 在 页 面 上 的 职责 。 屏幕 阅读 器 可 以 
轻松 的 解析 页 面 并 归 类 页 面 上 所 有 元 素 的 职责 ， 这 样 就 可 以 为 页 面 建立 一 个 简单 的 索引 。 例 如 ， 
可 以 找到 页 面 上 所 有 navigation 角色 的 元 素 ， 并 把 它们 提供 给 用 户 ， 方便 用 户 在 应 用 程序 中 快 
速 导 航 。 

这 些 角 色 属 性 定义 出 自 WIA-ARIA 规范 "， 现 已 经 被 纳入 了 HTMLS 规范 。 有 两 种 特有 的 角 
色 我 们 现在 就 可 以 用 : 标志 角色 (landmark) 和 文档 角色 (document), 


5.1.1 标志 角色 


标志 角色 用 来 标识 我 们 网 站 上 “有 意义 的 区 域 ， 如 banner、 搜 索 区 ， 或 导航 等 可 以 快速 被 
屏幕 阅读 副 识 别 的 元 素 。 
































fh & € 用 
banner 识别 页 面 中 的 banner 区 域 
search 识别 页 面 中 的 搜索 区 域 
navigation 识别 页 面 中 的 导航 元 素 
main 识别 页 面 中 主要 内 容 的 起 始 处 
contentinfo 识别 内 容 的 相关 信息 的 位 置 ， 比 如 版 权 信 息 和 发 布 日 期 
comp | ementary 识别 页 面 上 作为 主要 内 容 的 补充 信息 但 是 有 自己 独立 意义 的 内 容 
application 识别 一 块 包含 Web 应 用 的 页 面 区 域 ， 而 非 Web 文 档 


(QD 参见 http://www.w3.org/WAIT/PF/aria/roles , 
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我 们 可 以 在 2.1 市 内 容 的 基础 上 ， 在 AwesomeCo 博客 模板 中 应 用 上 述 多 种 角色 。 
在 页 面 的 总 头 部 中 ， 如 下 所 示 加 入 banner AE: 


Download html5 aria/blog/index.html 


«header id-"page header" role-"banner"» 
«hl-AwesomeCo Blog! «/hl1» 
«/header-» 


我 们 仅 需 要 在 已 经 存在 的 header 标签 中 加 入 额外 的 role= "banner" JR PERI S] , 
以 同样 方式 ， 我 们 可 以 加 入 识别 导航 的 角色 : 


Download html5 aria/blog/index.html 


«nav role-"navigation"» 
«ul» 
<li><a hrefz'"/"»Latest Posts«/a»«/li» 
<li><a hrefz"/archives"»Archives«/a»«/li» 
<li><a hrefz'"/contributors"»Contributors«/a»«/li» 
<li><a href-z"/contact"»Contact Us«/a»«/li» 
«/ul» 
«/hnav» 


HTMLS 规范 规定 了 一 些 元 素 的 默认 角色 , 而 且 不 能 被 改写 。nayv 元 素 一 定 有 角色 navigation, 











严格 来 说 无 需 被 再 次 声明 。 虽 然 屏 幕 阅读 如 对 此 类 默认 规定 的 接受 程度 还 不 高 ， 但 是 大 部 分 屏幕 


[js] i 


卖 右 可 以 理解 这 些 ARIA 角色 。 
主体 区 域 和 侧 边 栏 可 以 定义 如 下 : 


Download html5 aria/blog/index.html 


«section id-"posts" role-"main"» 
«/section» 


Download html5 aria/blog/index.html 


«section id-"sidebar" role-"complementary"» 


«nav» 

«h3»Archives«/h3» 

«ul» 
<li><a hrefz"2010/10"»October 2010«/a»«/li» 
<li><a href-z"2010/09"-September 2010«/a»«/li» 
<li><a href-"2010/08"-August 2010«/a»«/li» 
<li><a href-z"2010/07"»July 2010«/a»«/li» 
<li><a hrefz"2010/06"»June 2010«/a»«/li» 
<li><a href-"2010/05"»May 2010«/a»«/li» 
<li><a href-"2010/04"-April 2010«/a»«/li» 
<li><a hrefz"2010/03"-March 2010«/a»«/li» 
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<li><a href-"2010/02"-February 2010«/a»«/li» 
<li><a href-z'"2010/01"»January 2010«/a»«/li» 
«/ul» 
«/hnav» 
«/section» «!-- sidebar --» 


对 于 在 尾部 定义 的 发 布 和 版 权 信息 可 以 使 用 contentinfo 角色 ， 如 下 : 
Download html5 aria/blog/index.html 
«footer id-"page footer" role-"contentinfo'"» 


«p»&copy; 2010 AwesomeCo.-«/p» 
</footer> «!-- footer --» 


如 打 博 客 中 含有 搜索 框 ， 则 同样 可 以 为 其 赋予 角色 。 现 在 , 标志 已 经 定义 完了 ， 接 下 来 我 们 
继续 完善 ， 让 一 些 文档 元 素 也 可 以 被 标识 。 


5.1.2 文档 结构 角色 


借助 文档 结构 (document structure). 角色 可 以 让 屏幕 阅读 器 轻松 识别 一 些 固 定 的 内 容 ， 以 便 
建立 更 利于 导航 的 页 面 布 局 。 














fh & € 用 
document 识别 文档 内 容 区 域 ， 相 对 于 应 用 内 容 区 域 来 说 
article 识别 组 成 文档 独立 内 容 的 段落 
definition 识别 对 短语 或 主题 的 定义 
directory 识别 对 于 一 个 集合 元 素 的 引用 列表 ， 比 如 一 个 内 容 表格 。 用 于 静态 内 容 
heading 标识 一 个 页 面 区 域 的 头 部 
img 标识 一 段 包含 图 片 的 区 域 。 该 区 域 包含 图 片 或 者 标题 和 说 明文 字 
list 标识 一 组 不 可 交互 的 列表 项 
listitem 标识 一 个 或 者 一 组 不 可 交互 的 列表 项 
math 标识 一 个 数学 表达 式 
note 标识 对 于 主要 内 容 的 注释 或 补充 
presentation 标识 可 以 被 辅助 装置 忽略 的 用 于 美化 外 观 的 内 容 
row 标识 表格 中 的 一 行 
rowheader 标识 表格 中 包含 字段 含义 的 表格 头 


很 多 document 角色 可 以 被 HTML 标签 明确 定义 ， 比 如 article 和 header。 然 而 ， 也 有 些 
角色 (比如 document) 不 能 被 HTML 标签 明确 定义 ， 但 是 却 非 常 有 用 ， 克 其 当 应 用 程序 中 动态 
内 容 和 静态 内 容 混 合 时 。 例 如 ， 一 个 基于 Web 的 电子 邮件 客户 端 程序 中 ， 包 含 邮 件 内 容 的 元 素 
上 可 能 含有 document 属性 。 这 非常 有 用 ， 因 为 屏幕 阅读 强 通 闸 使 用 键盘 来 做 各 种 各 样 的 导航 。 
如 果 屏 幕 阅读 器 的 关注 点 在 应 用 程序 元 系 上 ， 可 能 需要 通过 键盘 来 六 贤 整个 Web 应 用 。 然 而 ， 
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如 果 屏 幕 阅 读 器 的 关注 点 在 静态 内 容 上 ， 就 可 以 换 一 种 方式 ， 通 过 屏幕 阅读 器 的 键 绑 定 来 实现 。 
我 们 可 以 在 博客 的 body 元 素 上 添加 document 角色 : 


Download html5 aria/blog/index.html 


«body role= document > 


W INTRARE B] 
过、 当 我 们 可 使 用 nav 或 者 header 元 素 时 ， 是 否 还 需要 标志 角色 ? 


年 一 看 ,标志 角色 似乎 是 多 余 的 。 但 是 当 我 们 无 法 使 用 新 元 素 的 时 候 ,， 标志 角色 却 可 以 
提供 很 大 的 灵活 性 。 


使 用 search 角色 ， 可 以 提供 给 用 户 的 不 仅仅 是 搜索 框 ， 而 且 还 会 包含 到 网 站 地 图 的 链 
接 、 一 个 快速 导航 的 下 拉 列 表 ， 或 者 其 他 所 有 可 以 帮助 用 户 快 速 获 取信 息 的 元 素 ， 而 如 果 没 
有 search 角色 ， 则 提供 给 用 户 的 就 只 是 一 个 搜索 框 。 


相对 于 新 元 素 和 表单 控件 ， 规 范 中 引入 的 角色 要 更 多 。 
这 将 使 屏幕 阅读 磊 将 该 页 面 当做 静态 内 容 来 处 理 。 


5.1.3 ENR 





HTAA EA E a AA BE de D] 13: ar C A ARE fA, 所 有 我 们 可 以 
放心 使 用 这 些 角 色 了 。 PAREEN E a zx RAR EN], 因此 使 用 这 些 角 色 只 会 帮助 
可 以 利用 他 们 的 人 。 


5.2 实例 12: 创建 可 访问 的 可 更 新 区 域 


为 解决 对 Web 应 用 中 Ajax 的 识别 ， 我 们 已 经 做 了 很 多 尝试 。 标 准 的 做 法 是 通过 改变 页 面 上 
已 更 新 内 容 的 视觉 效果 来 提示 用 户 某 些 变动 已 经 产生 了 。 然而 , 一 位 使 用 屏幕 阅读 器 的 用 户 是 无 
法 看 到 这 些 视 觉 效 果 的 。WIA-ARIA 规 范 提 供 了 一 个 完美 的 替代 解决 方案 ， 目 前 多 款 知名 的 屏幕 
阅读 软件 都 可 以 在 了 正 、Firefox 和 Safari 中 使 用 该 功能 。 


AwesomeCo 通讯 主管 想 要 一 个 新 的 主页 , 新 主页 上 需要 有 通 往 services (服务 ) 部 分 、contact 
(联系 信息 ) 部 分 、about (关于 我 们 ) 部 分 的 链接 。 他 要 求 主页 不 能 有 演 动 条 ， 因 为 “人 们 讨厌 
滚动 "。 他 希望 我 们 能 做 个 页 面 原型 ， 将 页 面 上 的 菜单 链接 水 平 放置 ， 当 单 击 菜单 链接 时 ， 改 变 
页 面 的 主要 内 容 。 这 个 主页 实现 起 来 非常 简单 。 使 用 aria-1ive 属性 , 我 们 可 以 做 一 些 以 前 无 法 
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做 好 的 事情 ， 即 使 用 支持 屏幕 阅读 器 的 方法 实现 此 种 界面 。 

让 我 们 实现 一 个 简单 的 页 面 ， 如 图 5-1 所 示 。 我 们 在 主页 上 放置 了 所 有 内 容 ， 如 果 可 以 使 用 
JavaScript, 我 们 将 隐藏 除了 第 一 条 记录 之 外 的 所 有 内 容 。 我 们 将 使 用 页 面 销 使 导航 链接 指向 各 个 


部 分 。 我 们 将 使 用 jQuery 把 页 面 销 的 链接 替换 为 事件 ， 使 主要 内 容 被 换 出 。 使 用 JavaScript 的 用 
户 可 以 看 到 我 们 的 主管 想 要 的 效果 ， 禁 用 了 JavaScript 的 用 户 也 可 以 看 到 页 面 上 的 所 有 内 容 。 








AwesomeCo 


Welcome Services Contact About 











Welcome 
The welcome section 
© 2010 AwesomeCo. 


Home About Terms of Service Privacy 





5-l 使 用 jQuery 改变 页 面 主要 内 容 的 主页 原型 


5.2.1 创建 页 面 


从 创建 一 个 基本 的 HMTLS 页 面 开始 ， 作 为 用 户 刚 进入 主页 看 到 的 默认 内 容 ， 我 们 为 其 加 上 
welcome 部 分 (欢迎 页 面 )。 下 面 古 含有 导航 条 和 跳 转 链接 的 页 面 代码 : 


Download html5 aria/homepage/index.html 





<!DOCTYPE html» 
«html lang-'"en-US"- 
«head» 
«meta http-equiv-"Content-Type" content-" text/html; charset-utf-8" /> 
«title»AwesomeCo«/title-» 
«link rel="stylesheet" href-"style.css" type="text/css"> 
«/head» 
«body» 
«header id="header"> 
«hl»AwesomeCo «/hl» 
«nav» 
«ul» 
<li><a hrefz'"£Zwelcome"»Welcome«/a»«/1li» 
<li><a hrefz'"£Zservices"»Services«/a»«/li» 
<li><a hrefz'"Zcontact'»Contact«/a»«/li» 
<li><a hrefz'"£Zabout'»About«/a»«/li» 
«/ul» 
«/nav» 
«/header-» 
«section id-"content" 
role2"document" aria-live2-"assertive" aria-atomic-"true"» 
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«section id="welcome"> 
<header> 
«h2»Welcome«/h2» 


«*/icauci»» 


<p>The welcome section«/p» 
«/section» 
«/section» 
«footer id="footer"> 
«p»&copy; 2010 AwesomeCo.-«/p» 
«nav» 
«ul» 
<li><a hrefz'http://awesomeco.com/"-Home«/a»«/li» 
<li><a hrefz'"about"»About«/a»«/li» 
<li><a hrefz'"terms.html"»Terms of Service«/a»«/li» 
<li><a href-z'"privacy.html"-»Privacy«/a»«/li» 
«/ul» 
«/nav» 
«/footer» 


</body> 
</html> 


welcome 部 分 有 一 个 卫 一 一 welcome， 与 导航 条 中 的 销 对 应 。 我 们 可 以 通过 同样 的 方式 声明 


页 面 中 的 其 他 部 分 。 


Download html5 aria/homepage/index.html 


«section id-'"services'» 


«header» 
«h2»Services«/h2» 
«/header» 
<p>The services section«/p» 
«/section» 
«section id="contact"> 
«header» 
«h2»Contact«/h2» 
«/header» 
<p>The contact section«/p» 
«/section» 


«section id="about"> 
«header» 
«h2»About«/h2» 
«/header» 
<p>The about section</p> 
«/section» 


FÈ 4 个 内 容 区 域 都 放 在 如 下 标记 中 : 
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Download html5 aria/homepage/index.html 


«section 1id-2"content" 
role2"document" aria-livez2s"assertive" aria-atomic-"true"'» 


折 行 代码 内 的 属性 告诉 屏幕 阅读 器 该 区 域 会 被 动态 更 新 。 
5.2.2 polite 和 和 assertive 更 新 


使 用 aria-live 来 提醒 用 户 页 面 上 的 变化 有 两 种 方法 。polite 模式 不 打 断 用 户 的 阅读 。 举 例 
来 说 ， 如 果 一 个 用 户 的 屏幕 阅读 红 正 在 关 读 一 个 句子 ， — HE 分 页 面 的 内 容 发 生 了 更 新 。 那 
么 如 果 是 设置 为 polite 模式 ， 则 屏幕 阅读 纶 会 等 当前 句子 陪读 完毕 后 再 阅读 更 新 后 的 内 容 ， 而 模 
式 设 置 为 assertive 的 话 ， ee 屏 大 阅读 絮 会 立刻 停止 阅读 
当前 内 容 ， 开 始 阅 读 新 内 容 。 在 构建 网 站 时 , 慎重 选择 这 两 种 模式 非常 重要 。 过 度 使 用 assertive 
会 使 人 困惑 。 因 此 , 请 仅 在 必要 时 使 用 assertive 模式 。 在 我 们 的 例子 中 , 是 应 该 使 用 它 的 ， 
为 我 们 将 把 其 他 内 容 都 隐 蕊 起 来 。 








5.2.3 atomic im 


第 二 个 属性 (aria-atomic-true) Apere as BH OREK AR SBPN EE, AR] 
将 其 设置 为 false， 则 告知 屏幕 阅读 器 仅仅 朗读 已 变化 的 节点 内 容 。 由 于 我 们 是 替换 区 域内 的 所 
有 内 容 ， 因 此 在 我 们 的 例子 中 ， 告 诉 屏幕 阅读 器 阅读 所 有 内 容 是 合理 的 。 如 果 我 们 要 使 用 Ajax 
替换 一 个 列表 项 或 者 附加 一 个 表格 条 目 ， 则 应 使 用 false, 








5.2.4 隐藏 区 域 


为 了 隐藏 一 些 区 域 ， 需 要 为 页 面 写 一 些 JavaScript 代码 。 我 们 将 创建 一 个 名 为 application.js 
的 文件 ， 然 后 连同 jQuery 库 一 起 放 到 我 们 的 页 面 中 。 


Download html5 aria/homepage/index.html 


«script type-"text/javascript" 
charset- utf-8" 
src-"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"» 
«/script» 


«script type-"text/javascript" 
charset- utf-8" 
src-"Javascripts/application.js"» 

</script> 


application.js 文件 中 包含 了 如 下 简单 的 代码 : 
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Download html5 aria/homepage/javascripts/application.js 


lne1 — // 支持 IE6、IE7 和 1IE8 的 HTML5 结构 元 素 
-  document.createElement( "header"); 
document.createElement("footer"); 
document.createElement("section"); 
5 | document.createElement( aside"); 
document.createElement("article"); 
document.createElement("nav"); 


$ (functionO 1 


$C"Zservices, #about, £contact").hi1de().addClassC"hidden"); 
$C"Zwelcome").addClass("visible"); 


$C"nav ul").click(Cfunction(event) 1 


target = $(event.target); 
if(target.is("a")5( 
event.preventDefault(; 
if ( $(target.attr("href")).hasClassC"hidden") ){ 
20 $(".visible").removeClass("visible") 
.addClass("hidden") 
.hideO; 
$Ctarget.attr("href")) 
: .removeClass("hidden") 
25 .addClass("visible") 
. Show ; 


30 T 
323 


第 1147, Ribak J services, about, contact 部 分 ， 还 对 它们 应 用 了 hidden 类。 然后 再 下 
一 行 , 我们 对 默认 的 welcome 区 域 应 用 了 visible 2$, 添加 了 这 些 类 , 我 们 在 做 切换 的 时 候 束 很 
容易 确定 哪些 区 域 需要 关闭 ， 以 及 何 时 需要 切换 。 

在 第 14 行 ,我 们 会 捕捉 对 导航 条 的 所 有 单 击 操作 。 在 第 17 行 ,我们 会 判断 单 击 的 是 什么 元 
素 。 如 条 单 击 的 是 一 个 链接 ， 我 们 将 会 判断 相应 部 分 是 否 为 隐 茂 状态。 通过 jQuery 的 元 素 选 择 
器 ， 被 单 击 链 接 的 href 属性 可 以 轻松 识别 将 要 跳 转 到 的 目标 区 域 ， 如 第 19 行 所 示 。 








如 林 对 应 部 分 是 隐 藏 状态 ， 则 需要 将 其 他 部 分 都 置 为 隐藏 状态 , 并 将 选择 的 部 分 设置 为 显 示 
状态 。 这 样 就 完成 了 ， 屏 幕 阅 读 各 软件 会 检 测 到 其 内 容 的 更 新 。 
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5.2.5 ENR 





像 角 色 一 样 , Socr bod 0 R ae E S LME HERE T o AERA ERKE, FE 
如 使 用 简单 的 JavaScript (C, RAEAN ERIK, EEA E SA 
PET Dro] IR ar S AX EE IDRE, AEA X EE Fe P 81] 8841 180] 04 Tr P DEEE AE o 
5.2.6 ”未 来 展望 


HTMLS 和 WIA-ARIA 规 范 为 更 具有 可 访问 性 的 Web 铺 平 了 道路 .有 了 可 以 识别 页 面 中 更 新 
区 域 的 能 力 ， 开 发 者 可 以 开发 丰富 的 JavaScript 应 用 ， 而 不 用 太 过 担心 可 访问 性 问题 。 





在 canvas 上 绘图 


之 前 我 们 讨论 的 是 基础 架构 和 界面 设计 ， 从 本 书 的 第 二 部 分 开始 ， 我 们 将 介绍 如 何 使 用 
HIML5 和 CSS3 画图 .操纵 多 媒体 文件 和 制作 个 性 化 界面 元 素 。 先 从 使 用 HTML5 的 新 元 素 canvas 
作 图 开始 。 


如 果 想 在 Web 应 用 中 加 入 图 片 ， 通 常 我 们 会 先 打开 绘图 软件 创建 一 幅 图 片 ， 然 后 使 用 img 
标签 将 其 包含 到 Web 页 面 中 。 如果 想 要 创建 动画 , 就 要 用 到 Flash, 借助 HIMLS 的 canvas 元 素 ， 
开发 人 员 可 以 使 用 JavaScript 在 浏 览 侨 中 以 编程 方式 创建 图 片 和 动画 。 不 论 简单 还 是 复杂 的 图 形 ， 
都 可 以 利用 canvas 创建 出 来 ， 甚 至 在 不 使 用 服务 恬 端 库 、Flash 或 其 他 插件 的 情况 下 ， 也 可 以 创 
建 图 形 或 图 表 。 本 章 ， 我 们 将 实现 这 些 内 容 。 





«canvas» [«canvas»«p»Alternative content«/p»«/canvas»] 支持 通过 JavaScript 创建 


和 拓 量 图 形 。[C4、F3、IE9、S3.2、0O10.1、1IOS3.2、A2] 


首先 ， 我 们 先 通过 绘制 简单 的 图 形 来 了 解 如 何 使 用 JavaScript 的 canvas 元 素 。 比 如 做 
AwesomeCo 的 一 个 logo。 然 后 ， 我 们 使 用 canvas 专用 的 图 形 库 创 作 一 个 条 形 图 ， 用 于 剖 贤 粥 
统计 。 我 们 还 会 讨论 一 些 兼 容 性 方面 的 挑战 ， 这 是 未 来 必然 会 面 对 的 问题 ， 因 为 canvas 不 仅仅 
是 页 面 元 了 素 更 是 编程 接口 。 





6.1 实例 13: 绘制 logo 


作为 一 个 容 右 元 素 , canvas 就 像 script 元 素 一 样 , 不 过 它 是 一 块 供 我 们 在 上 面 绘画 的 白板 。 
我 们 可 以 定义 一 个 带 有 长 宽 属 性 的 canvas， 如 下 所 示 : 


Download htmlScanvasgraph/canvas_simple_drawing.html 


«canvas id-"my canvas" widthz"150" height="150"> 
Fallback content here 
«/canvas» 
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薄 憾 的 是 ， 我 们 无 法 在 维持 内 容 不 变 的 情况 下 ， 使 用 CSS 控制 或 改变 canvas 元 素 的 长 宽 。 
因此 ， 需 要 在 定义 canvas 时 就 指定 canvas 的 尺寸 。 


我 们 可 使 用 JavaScript 将 图 形 绘制 在 canvas 上 。 即 使 我 们 对 不 支持 canvas 76381 II Si gs bie 
供 了 回 退 方案 ， 也 仍然 需要 阻止 JavaScript 代码 试图 操 探 它 。 通 过 id 属性 找到 canvas, fs 
warf xfi canvas 元 素 的 getContext 方法 : 

Download html5bcanvasgraph/canvas simple drawing.html 


var canvas - document.getElementById('my canvas'); 
if Ccanvas.getContext)í1 
var context = canvas.getContext('2d'); 


// 显示 用 于 替代 canvas 的 内 容 
// 或 者 让 浏览 器 显示 <Canvas> 元 素 里 面 的 文本 内 容 
} 


如 果 getContext 方法 有 返回 结果 ， 则 从 canvas 中 获取 一 个 2D 上下文， 然后 就 可 以 癌 其 中 
添加 对 象 了。 如 果 没 有 获取 到 上 上 下文 ， 则 需要 提供 显示 替代 内 容 的 回 退 方法 。 由 于 canvas 元 素 
需要 使 用 JavaScript 来 进行 控制 ， 因 此 ， 我 们 一 开始 就 要 搭建 一 套 回 退 框架 。 

获取 到 canvas 的 上 下 文 后 ， 就 可 以 很 方便 地 在 其 中 添加 元 素 了 。 添 加 一 个 红色 的 方块 ， 需 
要 先 设置 填充 颜色 ， 然 后 创建 方块 ， 如 下 所 示 : 


Download html5canvasgraph/canvas simple drawing.html 





context.fillStyle = "rgb(200,0,0)"; 
context.fillRect (10, 10, 100, 100); 


canvas 的 2D 上 下 文 是 一 个 网 格 ， 黑 认 情 况 下 ， 左 上 角 和 是 坐标 原点 。 当 创建 图 形 时 ， 需 要 指 
定 起 始 坐 标 卫 了 上 和 长 宽 〈 参 见 图 6-1)。 









80 > £63 在 canvas 上 绘图 


每 个 图 形 都 会 被 添加 到 上 自己 的 层 。 因 此 ， 我 们 可 以 创建 3 个 相互 间 10 像素 偏 移 的 方块 ， 如 
下 所 示 : 


Download htmlScanvasgraph/canvas_simple_drawing.html 


context.fillStyle = "rgb(200,0,0)"; 
context.fillRect (10, 10, 100, 100); 
context.fillStyle = "rgb(0,200,0)"; 
context.fillRect (20, 20, 100, 100); 


context.fillStyle = "rgb(0,0,200)"; 
context.fillRect (30, 30, 100, 100); 


"A REESE, An 6-2 所 示 。 





图 6-2 


在 了 解 了 基本 的 绘图 操作 之 后 , 让 我 们 看 下 AwesomeCo 的 logo, 这 是 一 个 非常 简单 的 图 片 ， 


如 图 6-3 所 示 。 
/rNAwesomeCo 


图 6-3 AwesomeCo 的 logo 


6.1.1 绘制 logo 


该 logo 包含 一 行文 字 、 一 条 折线 、 一 个 正方 形 和 一 个 三 角形 。 首 先 创建 一 个 HIMLS 文件 ， 
并 添加 一 个 canvas 元 素 ， 然 后 创建 绘制 logo 的 JavaScript 国 数 ， 该 国 数 会 检测 是 否 可 以 使 用 2D 
ETX: 
Download html5canvasgraphy/logo.html 


var drawLogo = function(){ 
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var canvas = document.getElementById('logo'); 
var context = canvas.getContext('2d'); 


}; 
我 们 在 检查 了 canvas 元 素 的 存在 与 人 盏 之 后 ， 立 即 调用 该 方法 ， 如 下 : 
Download html5canvasgraph/logo.html 


$(function { 
var canvas = document.getElementById('logo'); 
if (canvas.getContext)t 
drawLogo(); 
} 
493 


这 里 我 们 再 次 使 用 jQuery 函数 确保 在 文档 准备 就 绪 时 能 触发 事件 。 我 们 要 在 页 面 上 查找 ID 
为 logo 的 元 素 ,， 因此， 最 好 确保 将 canvas 元 素 添加 到 文档 中 ， 这 样 才能 找到 它 ， 才 能 使 检测 代 
码 正常 工作 。 








Download html5canvasgraph/logo.html 


«canvas id-"logo" widthz'"900" height-" "80" 
«hl1»AwesomeCoc/hl» 
«/canvas» 


t Fm] canvas 中 添加 文字 “AwesomeCo”， 
6.1.2 添加 文字 


mj canvas 中 添加 文字 的 过 程 包 括 选 择 字 体 、 字 号 和 设 定 对 齐 方式 ， 然 后 添加 文字 到 坐标 网 
格 中 对 应 的 坐标 上 。 我 们 可 以 如 下 所 示 疝 canvas 中 添加 文字 “AwesomeCo”: 





Download html5canvasgraph/logo.html 


context.font - 'italic 40px sans-serif'; 
context.textBaseline = 'top'; 
context.fillText('AwesomeCo', 60, 0); 


上 上 面 代码 中 ， 在 应 用 文字 到 canvas 之 前 ， 我 们 先 定 义 了 字体 样式 、 文 字 的 基线 ( 即 定义 了 
垂直 对 齐 方式 ) 。 然 后 我 们 使 用 fi11Text 方法 用 填充 色 填 充 文字 ， 设 置 右 边 距 为 60 个 像素 ， 为 
后 边 要 绘制 的 大 三 角形 路 径 留 出 空间 。 


6.1.3 绘制 线条 


在 canvas 上 划 线 ,使 用 的 是 “ 扣 连 接 ” 的 方法 。 先 在 canvas 坐标 网 格 上 定义 一 个 起 始点 ， 
然后 定义 将 要 连接 的 其 他 点 。 当 在 canvas 上 移动 时 ， 将 点 连接 成 线 ， 如 图 6-4 所 示 。 
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我 们 使 用 beginPathO DAFAR, Aa tE, WP: 
Download html5canvasgraph/logo.html 


context.lineWidth = 2; 
context.beginPath(); 
context.moveTo(O, 40); 
context.lineTo(30, 0); 
context.lineTo(60, 40 ); 
context.lineTo(285, 40 ); 
context.stroke(O; 
context.closePath(O; 


当 完 成 在 canvas 上 的 移动 之 后 ， 必 须 调 用 stroke 函数 将 线 画 出 来 ， 然 后 调用 closePath 
方法 停止 绘画 动作 。 


现在 剩 下 了 大 三 角形 里 面 的 正方 形 和 三 角形 组 合成 的 图 形 。 
6.1.4 移动 原点 


我 们 需要 在 大 三 角形 里 面 画 一 个 小 的 正方 形 和 三 角形 。 在 绘制 图 形 和 路 径 时 ， 可 以 指定 相对 
于 canvas 左上 角 原 点 的 和 了 坐标 ， 也 可 以 将 原点 移 到 新 的 位 置 。 


我 们 将 原点 移动 后 绸 在 里 面 绘制 小 正方 形 : 


Download html5canvasgraph/logo.html 





context.save(); 
context.translate(20,20); 
context.fillRect(0,0,20,20); 


需要 注意 的 是 ,在 移动 原点 之 前 要 先 调用 saveO 〇 方法 , 保存 canvas 之 前 的 状态 以 方便 之 后 
恢复 。 就 像 一 个 还 原点 ， 我 们 也 可 以 将 其 理解 为 一 个 栈 。 每 次 调用 saveO 图 数 都 会 得 到 一 个 新 
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的 记录 。 当 我 们 完成 绘画 后 ， 调 用 restoreO) 就 可 以 恢复 到 栈 量 上 部 还 原点 的 状态 。 
下 面 使 用 路 径 来 绘制 里 面 的 三 角形 ， 我 们 将 使 用 填充 法 来 达到 像 是 三 角形 让 入 了 正方 形 的 效果 : 


Download html5canvasgraph/logo.html 


context.fillStyle = 'Hfff'; 
context.strokeStyle = '£Zfff'; 


context.lineWidth = 2; 
context.beginPath(); 
context.moveTo(O, 20); 
context.lineTo(10, 0); 
context.lineTo(20, 20 D); 
context.lineTo(O, 20 ); 
context.fillO;j; 
context.closePath(O ; 
context.restore(); 


我 们 设置 了 笔触 ， 在 开始 绘画 之 前 ， 将 其 填充 为 白色 (#fff)。 然 后 开始 画 线 ， 因 为 之 前 移 
动 了 原点 ， 所 以 现在 是 相对 于 正方 形 左 上 角 来 定位 的 。 

即将 大 功 告 成 ， 现 在 只 剩 下 调 色 了 。 
6.1.5 添加 颜色 

在 6.1.4 市 ,我 们 人 简要 地 介绍 了 如 何 为 绘制 工具 设置 笔触 和 填充 颜色 。 在 绘制 任何 东西 之 前 ， 
添加 如 下 代码 就 可 以 将 绘制 内 容 的 颜色 设置 为 红色 : 


Download html5canvasgraph/logo.html 














context.fillStyle = "Zf00"; 
context.strokeStyle = "Zf00"; 


但 是 这 么 做 有 些 单调 ， 我 们 可 以 创建 渐变 对 象 并 应 用 渐变 到 笔触 和 填充 颜色 中 : 
Download htmlScanvasgraph/logo_gradient.html 


// context.fillStyle = "#f00"; 

// context.strokeStyle = "#f00"; 

var gradient = context.createlinearGradient(O, 0, O, 40); 
gradient.addColorStop(O0, 'Za00'5); // 上 暗 红色 
gradient.addColorStop(1, '£f00'5; // 红色 
context.fillStyle = gradient; 

context.strokeStyle = gradient; 


我 们 仅 需 要 创建 一 个 渐变 对 象 ,设置 渐变 的 停止 颜色 。 在 本 例 中 ,我 们 只 是 在 两 种 色调 的 红 
色 之 间 应 用 痢 变 。 有 必要 的 话 ， 还 可 以 画 出 彩虹 。 


CD 请 勿 滥用 彩虹 色 ! 
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需要 注意 的 是 ， 我 们 需要 在 画 之 前 先 设置 颜色 。 


到 此 为 止 ，logo 就 完成 了 ， 在 这 个 过 程 中 ， 我 们 也 更 好 地 理解 了 如 何在 canvas 上 绘制 简单 的 
图 形 。 然 而 ，IE9 之 前 版 本 的 浏览 右 是 不 支持 canvas 元 素 的 ， 因 此 我 们 要 解决 这 个 兼容 性 问题 。 


6.1.6 ENR 


Google 发 布 了 一 个 名 为 ExplorerCanvas ”的 库 ， 为 了 正 用 户 开 放 了 几乎 所 有 的 Canvas API, 我 
们 需要 做 的 仅仅 征 将 该 库 包含 进 来 : 
Download html5canvasgraph/logo gradient.html 


<!--[if Ite IE 8]» 
«script src-"javascripts/excanvas.js'"»«/script» 
«![endif]--» 


这 么 做 理论 上 能 解决 IE 用 户 的 问题 ， 但 是 实际 效果 并 没有 那么 好 。 在 撰写 本 书 时 ， 最 稳定 
的 版 本 都 还 无 法 支持 文字 的 添加 , 而 从 Subversion 版 本 控制 库 ? 中 获取 的 版 本 其 字体 是 有 问题 的 。 
而 且 ， 该 库 还 不 支持 为 笔触 添加 渐变 。 

因此 ， 我 们 需要 依赖 其 他 解决 方案 ， 例 如 在 canvas 元 素 内 放置 一 个 PNG 格式 的 logo 图 片 ， 


或 者 根本 就 不 使 用 canvas。 本 例 仅仅 是 作为 一 个 练习 ， 来 介绍 如 何在 canvas 上 绘画 ， 所 以 即使 
无 法 让 其 完美 运行 在 跨 平 台 的 生产 系统 中 ， 也 不 是 什么 大 事 。 


6.2 实例 14: 使 用 RGraph 绘制 统计 图 


AwesomeCo 网 站 的 内 容 比较 多 ， 高 级 主管 硕 望 能 看 到 网 络 状态 的 统计 图 。 虽 然 可 以 让 后 台 开 
发 人 员 实 时 获取 这 些 数据 ， 但 钙 他 们 更 希望 看 到 你 是 否 有 办 法 在 训 览 侣 中 以 图 形 的 形式 将 其 显示 
出 来 。 为 此 ， 他 们 提供 了 一 些 测 试 数据 。 我 们 的 目标 是 将 测试 数据 转换 为 如 图 6-5 所 示 的 图 形 。 


共用 这 一 网 站 的 浏览 
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Safari 4 Internet Explorer Firefox Google Chrome 


图 6-5 使 用 canvas 生成 的 客户 端 条 形 图 


(D 参见 http://code.google.com/p/explorercanvas/, 


© 参见 http://explorercanvas.googlecode.com/svn/trunk/excanvas.js , 
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在 Web 页面 上 画图 有 很 多 种 方法 ,开发 人 员 通 常会 选择 用 Flash 来 显示 图 形 , 然 而 在 类 似 iPad 
和 iPhone 等 移动 设备 上 ，Flash 会 受到 限制 。 也 有 一 些 服务 器 端的 解决 方案 ,但 是 如 果 处 理 实时 
数据 就 太 费 处 理 器 了 ， 而 canvas 是 基于 标准 的 一 种 客户 端 解决 方案 ， 是 很 好 的 选择 ， 只 要 我 们 
能 小 心 处 理 , 就 能 确保 它 在 旧版 本 神 览 副 中 也 能 正常 工作 ,现在 A 笃 知 道 如 何 绘 制 正方 形 了 ， 
但 是 如 果 想 绘制 更 复杂 的 图 形 ， 则 需要 更 多 的 JavaScript 代码 。 这 需要 借助 图 形 库 来 实现 。 


虽然 HTMLS 还 没有 大 量 普及 ,但 这 并 没有 ut 发 者 开发 RGraph 的 进程 有 了 RGraph, 
在 HIMLS canvas 上 画图 就 会 变 得 异常 简单 。 它 是 一 个 纯 JavaScript 解决 方案 ， 因 此 如 采用 户 的 
客户 端 禁用 了 JavaScript， 它 就 无 法 工作 了 ， nd canvas 也 就 无 法 工作 了 。 下 面 是 绘制 简单 的 条 
形 图 的 一 段 代 码 : 











Download htmlScanvasgraph/rgraph_bar_example.html 
«canvas width="500" height="250" id="test">[no canvas support]«/canvas» 
«script type-"text/javascript" charset="utf-8"> 
var bar = new RGraph.Bar('test', [50,25,15,10]); 
bar.Set('chart.gutter', 50); 
bar.Set('chart.colors', ['red']5; 
bar.Set('chart.title', "A bar graph of my favorite pies"); 
bar.Set('chart.labels', ["Banana Creme", "Pumpkin", "Apple", "Cherry"])5; 


bar.Draw(Q); 
«/script» 


我 们 所 需要 做 的 就 是 创建 一 系列 JavaScript 数 组， 然后 库 会 目 动 在 canvas 上 将 图 画 出 来 。 
6.2.1 使 用 HTML 描 述 数 据 


我 们 可 以 在 JavaScript 代码 中 对 六 览 絮 的 统计 数据 进行 硬 编码 。 但 这 样 做 的 话 ， 只 有 没 禁 
JavaScrpit 的 用 户 才 能 看 到 这 些 数据 。 另 一 种 方法 是 把 数据 作为 文本 放 在 页 面 上 。 然 后 使 用 
JavaScript 读 取 这 些 数 据 ， 称 后 将 其 提供 给 图 形 库 。 


Download htmlbcanvasgraph/canvas graph.html 








«div id-"graph data" 
«hl»Browser share for this site«/hl» 
«ul» 
«li» 
«p data-name-"Safari 4" data-percent-"15"'» 
Safari 4 - 1596 
«/p» 
«/li» 


(D 参见 http://www.rgraph.net/, 


86 > £63 在 canvas 上 绘图 


«p data-name-" Internet Explorer" data-percent="55"> 
Internet Explorer - 5596 
«/p» 
«/li» 
«li» 
«p data-name-"Firefox" data-percent-'"14"» 
Firefox - 1496 
«/p» 
«/li» 
«li» 
«p data-name-"Google Chrome" data-percent-"16"» 
Google Chrome - 16% 


- fn 


«/p» 
«/li» 
«/ul» 
«/div» 


我 们 使 用 HIMLS 的 数据 属性 来 存储 浏览 右 的 名 字 和 占 比 .尽管 我 们 有 这 些 信息 的 文本 形式 ， 
但 是 通过 编程 处 理 这 些 数据 更 简单 ， 因 为 不 需要 进行 字符 串 解 析 。 

通过 浏览 器 打开 该 页 面 或 者 直接 看 图 6-6， 可 以 看 到 图 形 数据 被 清晰 显示 出 来 并 且 即 使 没有 
图 形 也 具有 很 强 的 可 读 性 。 这 可 以 作为 移动 设备 或 者 其 他 无 法 使 用 canvas 或 禁用 了 JavaScript 
的 用 户 的 替代 内 容 。 


AE FE — bd wh UI oa. a 
. Safari 4 - 1556 
» Internet Explorer - 55% 


* Firefox - 14% 


* Google Chrome - 1656 


图 6-6 图 形 的 HTML fis 
接 下 来 ， 我 们 将 上 述 标记 转换 为 图 形 。 
6.2.2 ”将 HTML 内 容 转 换 为 条 形 图 


为 显示 条 形 图 , 我 们 需要 使 用 RGraph 的 Bar 图 形 库 和 RGraph 核心 库 , 还 需要 使 用 jQuery 从 
文档 中 抓 取 数 据 。 在 HTML 页 面 的 head 区 域 ， 需 要 将 库 包 含 进来 。 


Download htmlbcanvasgraph/canvas graph.html 


«script type-"text/javascript" 
charset- ""utf-8" 
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src-"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"» 
«/script» 
«script src-"Jjavascripts/RGraph.common.js" ></script> 
«script src-"javascripts/RGraph.bar.js" ></script> 


为 了 创建 图 形 ， 我 们 需要 从 HTML 文档 中 抓 取 图 形 的 标题 、 标 签 (label), 、 数 据 ， 然 后 传递 


给 RGraph J£, RGraph 在 数组 中 存放 接受 到 的 标 笠 和 数据 。 我 们 可 以 使 用 jQuery 快速 建立 这 些 


数组 。 


Cv 


Download htmlbcanvasgraph/canvas graph.html 


Linel function canvasGraphO(t 
var title = $('#graph_data h1').textÓ; 


var 


333 


Var 
10 DF 


var 


bar. 
bar. 
15 bar. 
bar. 
bar. 


labels = $C"Zgraph data»ul»li»p[data-name]").map(function() 1 


return $(this).attr("data-name"); 


percents = $("£zgraph data»ul»li»p[data-percent]").map(functionO 1 


return parseInt($(this).attr("data-percent")); 


bar = new RGraph.Bar('browsers', percents); 
Set('chart.gutter', 50); 
Set('chart.colors', ['red'])5; 
Set('chart.title', title); 
Set('chart.labels', labels); 

Draw); 


首先 ， 在 第 2 行 ， 我 们 获取 了 标题 的 文本 信息 。 在 第 4 行 ， 我 们 选取 了 所 有 带 有 data-name 


属性 的 元 素 ， 


使 用 jQuery 的 map 方法 将 这 些 信息 转换 到 了 一 个 数组 中 。 


第 8 行使 用 了 同样 的 逻辑 ， 获 得 了 占 比 数据 的 数组 。 


得 到 了 这 些 数 据 ，RGraph 丈 可 以 轻松 地 男 出 图 形 了 。 


6.2.3 显示 备用 内 容 


在 6.2.1 市 , 我 们 本 可 以 把 图 像 放 在 canvas 的 开始 和 结束 标签 之 间 。 这 样 就 可 以 在 训 览 器 支 
ff canvas BERT BEA GC UR. rud ED AX canvas 的 时 候 将 其 显示 出 来 。 然 而 ， 当 六 


一 
imma 


览 绒 支持 canvas 但 是 用 户 禁 用 了 JavaScript 的 时 候 仍 然 会 隐藏 它们 。 
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jQuery CSS 和 CSS 


在 本 章 ， 我 们 在 创建 元 素 的 时 候 使 用 jQuery 为 其 添加 属性 信息 。 诸 如 标签 的 颜色 和 条 
形 图 的 颜色 等 大 部 分 属性 信息 ,应 该 被 写 到 一 个 独立 的 样式 表 中 , 特别 是 如 果 开 发 人 员 布 户 
能 够 针对 脚本 独立 改变 的 属性 。 对 于 原型 ， 本 例 中 的 方法 没有 问题 ， 但 是 如 果 作为 生产 版 本 
的 话 ， 一 定 要 记得 分 离 表现 、 行 为 和 内 容 。 





我 们 也 可 以 把 数据 放 在 canvas 的 外 面 ， 然 后 在 检查 到 canvas 存在 的 情况 下 ,使 用 jQuery 
数据 隐 臧 起 来 。 
Download htmlbcanvasgraph/canvas graph.html 


var canvas - document.getElementById('browsers'); 
if Ccanvas.getContext)( 

$C'Zgraph data').hideO; 

canvasGraph C) ; 


} 
这 样 ， 图 形 就 可 以 显示 了 ， 除 韭 用 户 的 浏览 器 不 支持 canvas 元 素 。 


6.2.4 ENR 


在 构建 这 一 解决 方案 时 ， 我 们 已 经 解决 了 可 访问 性 和 禁用 JavaScript 时 的 回 退 问题 ， 但 是 我 
们 还 可 以 为 那些 不 支持 canvas 但 是 可 以 使 用 JavaScript 的 用 户 提 供 一 幅 备 用 图 片 。 


其 实 图 形 库 有 很 多 , 但 是 每 个 库 抓 取 数 据 的 方法 各 不 相同 。 条 形 图 其 实 就 古 一 些 具有 特定 高 
度 的 长 方形 ， 而 且 我 们 有 具备 创建 页 面 图 形 所 需 的 所 有 数据 。 


Download htmlbcanvasgraph/canvas graph.html 


Linel — function divGraph(barColor, textColor, width, spacer, lblHeight)í 
$C'Zgraph data ul').hideO; 
var container = $("Zgraph data"); 


5 container.css( ( 
"display" : "block", 
"position" : "relative", 


"height": "300px"j 
23 


$C"Zgraph data»ul»1i»p").each(functionCi)1 


var bar = $("«div»" + $(this).attr("data-percent") + "%</div>"); 
var label = $("«div»" + $(this).attr("data-name") + "«/div»"); 
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15 
var commonCSS = { 
"width": width + "px", 
"position" : "absolute", 
- "left" : 1 * (width + spacer) + "px"; 
20 
var barCSS = ( 
"background-color" : barColor, 
"color" : textColor;, 
- "bottom" : lblHeight + "px", 
2n "height" :  $(this).attr("data-percent") + "£X" 
i Js 
var labelCSS = í"bottom" : "O", "text-align" : "center"; 
- bar.css( $.extend(barCSS, commonCSS) ); 
30 label.css( $.extend(labelCSS,commonCSS) ); 
container.append(bar); 
container.append(label); 
Di 
35 


2 行 隐 城 了 无 序列 表 ， 这 样 就 看 不 到 文本 信息 了 。 然 后 抓 取 包含 图 形 数据 的 元 素 ， 并 对 这 
些 元 素 应 用 基本 的 CSS TERN, B 6 行 ， 我 们 将 元 素 的 位 置 属性 设置 为 relative， 使 条 形 图 和 标 
A [ri E CE n VALDE EET DL 
然后 我 们 循环 志 历 无 序列 表 中 的 段落 (11 f), JPGUEEAUE. FEE, WEGIEE 
两 个 div 元 素 ， 一 个 针对 条 形 ， 一 个 针对 标签 信息 (标签 在 条 形 的 下 面 )。 因 此 只 和 需 人 简单 的 计算 
和 一 些 jQuery 代码 ， 我 们 就 可 以 重建 这 一 图 形 ， 虽 然 看 起 来 不 完全 一 致 ， 但 对 于 证 明 概 念 来 说 
已 经 足够 了 。 


接 下 来 ， 我 们 只 需 将 代码 放 在 canvas 中 去 测试 ， 如 下 所 示 : 





Download htmlbcanvasgraph/canvas graph.html 


var canvas = document.getElementById('browsers'); 
if Ccanvas.getContext)í 
$C'Zgraph data').hideO; 
canvasGraph OO; 
} 
else{ 
divGraphC"Zf00", "£Zfff", 140, 10, 20); 
j 


图 6-7 PHRAS. EEH JavaScript, HTML 和 CSS， 我 们 创建 了 一 个 适用 于 多 种 平 
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台 浏 览 器 的 客户 端 条 形 图 和 统计 信息 。 使 用 canvas 有 一 个 额外 的 好 处 ， 它 促使 我 们 从 一 开始 就 
考虑 莱 容 性 问题 ， 而 不 古 在 后 期 修 修补 补 。 这 对 于 可 访问 性 非 第 有 益 。 





共用 这 一 网 站 的 浏览 器 
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6-7 Internet Explorer 中 的 图 形 


这 是 创建 图 形 最 方便 和 最 灵活 的 方法 ， 可 以 轻松 创建 图 形 并 附 上 相应 的 可 供 营 代 的 文本 信 
息 。 这 样 ， 大 家 就 部 可 以 分 享 重要 鸭 数据 了 。 


M iNTRZE B] 
过 为 什么 不 试 一 下 ExplorerCanvas? 


我 们 在 6.1.6 节 提 到 过 ExplorerCanvas， 它 可 以 与 RGraph 很 好 地 配合 使 用 。RGraph 其 
至 发 布 了 带 有 ExplorerCanvas 的 版 本 。 然 而 ， 这 个 综合 版 本 只 适用 于 Internet Explorer 8 ， 如 
果 用 户 使 用 IE7 或 更 老 的 版 本 ， 就 不 得 不 提供 类 似 于 我 们 之 前 讨论 过 的 回 退 方案 。 我 建议 大 
家 留意 一 下 ExplorerCanvas， 因 为 人 们 对 该 库 的 更 新 维护 很 积极 。 或 者 ， 你 也 可 能 想 通 过 自 
已 的 技巧 来 解决 这 个 问题 。 





6.2.5 ”未 来 展望 


既然 我 们 已 经 对 canvas 的 工作 原理 略 知 一 二 ， 那 接 下 来 就 可 以 想 一 下 可 以 应 用 canvas 的 
地 方 了 。 我 们 可 以 利用 canvas 来 创建 游戏 、 建 立 媒体 播放 帮 的 用 户 界 面 ， 或 者 使 用 它 绘 制 更 有 
乏术 性 的 图 片 ， 而 你 所 需要 的 只 是 一 些 简 单 的 JavaScript 代码 和 一 点 点 想象 力 。 

现在 , Flash EE canvas 更 有 优势 , 因为 对 Flash 的 支持 很 广泛 , 但 随 着 HIMLS 的 普及 , canvas 

会 被 广泛 地 应 用 , 更 多 的 开发 人 员 会 利用 canvas 在 训 览 嫩 中 创建 简单 的 二 维 图 形 。canvas 不 
需要 任何 额外 的 插件 ， 也 比 Flash 耗费 更 少 的 CPU， 尤其 是 在 Linux 和 OS X E, mH., canvas 
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提供 了 在 Flash 不 可 用 时 创建 二 维 图 形 的 机 制 。 随 着 支持 canvas 的 平台 越 来 越 多 ， 其 速度 和 功 
能 也 会 更 加 完善 ， 同 时 也 会 有 越 来 越 多 的 开发 工具 和 库 来 帮助 我 们 做 更 加 神奇 的 事情 。 





不 过 canvas 不 会 止步 于 二 维 图 形 ，canvas 规 攻 最 后 还 会 支持 三 维 图 形 。 训 览 右 厂商 也 正在 
实现 硬件 加 速 。 对 于 仅仅 使 用 JavaScript 就 能 创建 出 有 趣 的 用 户 界面 和 引人入胜 的 游戏 ，canvas 
让 这 一 切 成 为 了 可 能 。 


第 / 章 
嵌入 音频 和 视频 


在 当今 因特网 上 ,音频 和 视频 占据 着 极其 重要 的 位 置 。 尽 管 因特网 上 的 播客 、 音 频 预 览 其 至 
视频 教程 比比 皆 是 ,但 直到 现在 ,也 只 能 通过 浏览 器 插件 运行 它们 。 对 于 如 何在 页 面 中 能 入 音频 
和 视频 ，HTML5 引入 了 新 的 方法 。 本 章 ， 我们 不 仅 会 讨论 一 些 在 页 面 中 租 入 音频 和 视频 的 方法 ， 
还 要 确保 使 用 旧 神 览 器 的 用 户 也 能 正常 浏览 它们 。 


本 草 我 们 要 讨论 的 定 下 面 两 个 元 素 。 





O «audio» [«audio src="drums .mp3"»«/audio»] ii| a zs Jm ES CH WI, [CA. F3.6, IE9, 
$3.2. 010.1, IOS3, A2] 
Q «video» [«video Src= tutorial .m4v"»«/video»] 


IE9, 83.2, OIO.5, IOS3, A2] 


在 讨论 这 两 种 元 素 之 前 ， 我 们 有 必要 先 了 解 一 下 Web 上 音频 和 视频 的 发 展 历史 。 毕 竞 要 和 弄 
明白 我 们 要 去 哪儿 ， 必 须 先 知道 我 们 在 哪儿 。 


7.1 发 展 历史 


很 早 以 前 开发 人 员 就 尝试 在 Web 页 面 上 使 用 音频 和 视频 了 。 这 种 尝试 始 于 人 们 在 自己 的 主 
RPA MIDI 文件 ， 当 时 使 用 embed 标签 来 引用 文件 ， 比 如 : 


«embed src="awesome.mp3" autostart-" true" 
loop2-"true" controller2"true"»«/embed» 


因为 embed 标签 一 直 无 法 成 为 标准 ， 所 以 开发 人 员 换 用 被 纳入 了 W3C 标准 的 object 标签 。 
为 了 兼容 不 支持 object ERSEHJIH DU aS, XH 4E object 标签 中 还 要 散 套 embed 标签 ， 例 如 : 


<object> 

«param name="src" value="simpsons .mp3"> 
<param name="autoplay" value="false"> 
<param name-"controller" value-"true"» 





A a, zs JH jS CEU. [C4, F3.6, 
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«embed src-"awesome.mp3" autostart-" false" 
loop="false" controller2"true"»«/embed» 
</object> 


但 是 , HIEM A RIAI A er ARELAS PET AERAR, BPEARSA ABET EXETT TIE 
确 的 配置 。 在 Web ERMA A328 CIOBORGERUILL T) n s EAER T. RARE 
Web 上 磁 到 各 种 各 样 的 音频 和 视频 ， 包 括 RealPlayer, Windows Media， 以 及 QuickTime。 每 个 厂 
商都 有 自家 的 视频 标准 ， 而 且 似 乎 每 个 网 站 用 来 编码 视频 的 方法 和 格式 都 不 相同 。 


Macromedia (已 被 Adobe 收 购 ) 很 早 就 意识 到 ， 在 跨 平台 实现 音频 与 视频 的 传送 方面 ， 它 的 
Flash Player 可 能 是 最 佳 载体 。 当 时 近 97% 的 Web A Rara xt Flash， 当 内 容 提供 者 发 现 他 们 
只 需要 做 一 次 编码 即 可 在 所 有 平台 上 播放 其 内 容 时 ， 无 数 的 网 站 开始 转 加 使 用 Flash 传播 音频 和 
视频 。 


Apple 特 立 独行 ， 于 2007 年 发 布 了 iPhone 和 iPod touch, Eque eue H 
Flash 的 支持 。 内 容 提 供 —— 让， 实现 了 视频 在 Mobile Safari j| W aF FP AIE 905 $88 2C e 
些 视频 采用 H.264 编码 ， 也 能 通过 普通 的 Flash Player 播放 ， ee 
而 使 内 容 可 运行 于 多 种 平台 。 


HTMLS A A S. s Pr VE LE E AARE in TF — HE 
HTML 的 插件 。 这 就 是 HTMLS 音频 和 视频 开始 变 得 越 来 越 有 意义 的 地 方 ， 即 将 音频 和 视频 作为 
Web 内 容 中 的 “一 等 公民 。 








W y JEEB.e 
T i 已 经 可 以 跨 浏览 器 使 用 了 ， 那 为 什么 不 继续 使 用 它 呢 ? 


3&. fn] dine 是 ,作为 一 位 开发 人 员 , AAAA] 5287 83 JL AAT ST VUDSEHR PCS 
中 的 内 容 进 行 什么 操作 。 我 们 可 以 使 用 CSS 和 JavaScript H&TE 7G 3& ,. 而 不 必 像 现在 这 样 胡乱 
向 Flash 影片 aa 另外 ， 随 着 标准 越 来 越 成 玖 ， 这 种 状况 也 会 逐渐 好 转 。 


7.2 ”容器 和 编 解码 器 


说 起 Web 上 的 视频 ， 从 为 一 个 角度 来 说 其 实 讨论 的 是 容 各 和 编 解 码 副 。 我 们 可 以 把 数码 相 
机 中 导出 来 的 AVI 或 者 MPEG 文件 看 做 是 视频 ， 但 这 样 理 解 大 过 简单 。 容 需 就 像 是 一 个 外 充 
其 中 包含 了 音频 流 和 视频 流 ， 其 至 有 时 候 还 包含 一 些 字 大 之 类 的 元 数据 。 这 些 音频 和 视频 流 需要 
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进行 编码 ， 于 是 就 出 现 了 编 解码 细 。 视 频 和 音频 有 成 百 上 干 种 编码 方式 ， 但 对 于 HTMLS 视频 ， 


仅 需要 一 少 部 分 。 
7.2.1 ”视频 编 解码 器 


当 我 们 观看 视频 的 时 候 , 视频 播放 如 需要 对 视频 进行 解码 。 然 而 我 们 使 用 的 播放 各 可 能 无 法 
解码 我 们 想 看 的 视频 。 一 些 播放 此 使 用 软件 来 解码 视频 ， 比 较 慢 或 者 会 大 量 占 用 CPU。 有 些 播 
放 圾 使 用 硬件 解码 ， 但 却 限制 了 可 播放 的 视频 格式 。 现 在 ， 要 使 用 HTMLS 的 video 标签 的 话 ， 
我 们 需要 了 解 3 种 视频 格式 : H.264, Theora 以 及 VP8。 


编码 格式 及 其 支持 的 浏览 


Q H.264 [IE9, S4, C3, IOS] 
Q Theora [F3.5, C4, OI0] 
O VP8 [IE9 如 采编 解码 器 已 安装 、F4、CS、010.7] 


1. H.264 


H.264 是 一 种 高 质量 的 编 解码 器 标准 ， 由 MPEG 组 创建 并 在 2003 年 标准 化 。 为 了 在 兼容 诸 
如 手机 之 类 的 低 端 设备 的 同时 兼顾 到 高 端 设备 的 视频 处 理 ， 了 .264 规范 分 成 了 好 几 类 。 通用 属 
性 在 所 有 类 中 都 有 涵盖 ， 但 高 端 类 中 增加 了 一 些 可 选 的 特性 ， 用 来 提高 视频 质量 。 举 例 来 说 ， 
iPhone 和 Flash Player 都 支持 H.264 格式 视频 的 播放 ， 但 iPhone 只 支持 低 质 量 的 “baseline” 类 ， 
而 Flash Player 则 支持 高 质量 视频 流 。 我 们 可 以 一 次 将 视频 编码 为 不 同 的 类 ， 这 样 就 能 在 不 同 的 
平台 上 实现 平滑 播放 。 

由 于 Microsoft 和 Apple 都 支持 H.264 编码 , 因此 H.264 已 经 成 为 事实 标准 。 除 此 之 外 ,Google 
HJ YouTube 将 其 视频 编码 转换 为 了 H.264 格式 , 以便 在 iPhone 上 播放 ,而且 Adobe 的 Flash Player 
也 对 它 提 供 支 持 。 不 过 H.264 不 是 开放 的 技术 ， 它 受 专 利 保护 ,授权 后 方 可 使 用 。 内 容 提 供 商 必 
须 在 支付 版 税 后 才能 使 用 H.264 进行 视频 编码 ,不 过 对 于 免费 提供 给 终端 用 户 的 内 容 来 说 , 是 无 
需 支 付 版 税 的 。” 


目 由 软件 的 支持 者 们 担心 版 权 所 有 者 最 终 会 要 求 内容 提 供 商 文 付 高 郧 的 版 税 。 正 是 这 种 担 
心 ， 促 进 了 百代 性 编码 奏 的 开发 和 推广 。 











(D H.264 编码 体系 定义 了 4 种 不 同 的 Profile (类 ): Baseline (基线 类 )、Main (主要 类 )、Extended (扩展 类 ) 和 High 
Profile (高 端 类 )。 一 一 译 者 注 
© 参见 http://www.reelseo.com/mpeg-la-announces-avc-h264-free-license-lifetime/, 
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2. Theora 


Theora œ H Xiph.Org 组 织 开发 的 免 版 权 编码 标准 。 对 于 内 容 提供 商 来 说 ， 通 过 Theora 可 以 
创建 出 与 使 用 H.264 时 同样 效 末 的 视频 , 但 是 设备 制造 商 采 用 此 标准 的 步伐 有 点 慢 。 不 需要 任何 
人 额外 软件 的 辅助 ，Firefox、Chrome 和 Opera 就 能 够 在 任意 平台 上 播放 Theora 格式 的 视频 ， 但 是 
Internet Explorer, Safari FN iOS 设备 却 不 行 。Apple 和 Microsoft Hb “KEEA. PMA “k 
艇 专利 ” 征 指 故 意 延 久 专 利 的 发 布 ， 在 其 他 人 实现 这 一 技术 时 保持 低调 。 时 机 成 熟 时 ， 专 利 申请 
人 “ 译 出 水 面 ， 对 宣 无 戒备 的 市 场 收 取 专 利 使 用 费 。 


3. VP8 








Google 的 VP8 是 一 项 完全 开源 、 免 版 税 的 编码 标准 。 并 且 用 其 创建 的 视频 质量 可 同 H.264 18 

频 相 媲美 。 支 持 VP8 的 浏览 器 有 Mozilla, Google Chrome 和 Opera, Microsoft 承诺 只 要 用 户 安装 

过 任 一 款 编 解码 器 , 其 Internet Explorer 9 就 可 以 支持 VP8, Adobe 的 Flash Player 也 同样 支持 VP8, 

因此 VP8 是 非 币 值得 关注 的 奉 代 品 。 但 是 Safari 和 iOS 设备 不 支持 VP8， 这 就 意味 着 尽 省 VP8 是 
免费 的 , 但 是 要 想 在 iPhone 或 者 iPad 上 面 发 布 视频 ， 那么 内 容 提 供 商 仍 需 使 用 H.264 S eR s 


7.2. ”音频 编 解 码 器 











看 似 相 互 苑 争 的 不 同 视频 标准 方面 的 状况 还 不 够 复 灯 , 但 不 同音 频 标准 方面 的 竞争 也 需要 我 
IIR. 
ERRE IRA ag 


O AAC [S4, C3, IOS] 
O MP3 [IE9, S4, C3, IOS] 
a Vorbis (OGG) [F3, C4, 010] 


1. 高 级 音频 编码 CAAC) 


这 是 Apple 在 其 iTunes Store 中 使 用 的 音频 格式 。 它 的 设计 初 袁 是 ， 在 相同 文件 大 小 的 情况 
下 提供 比 MP3 更 好 的 音质 。 同 H.264 类似 ，AAC 也 提供 多 种 音频 类 。 它 与 H.264 的 另外 一 个 共 
同 点 就 是 ，AAC 也 不 是 一 项 免费 的 编码 标准 ， 有 相应 的 授权 费 。 


Apple 的 所 有 产品 都 支持 AAC 文 件 , 而 Adobe 的 Flash Player 和 开源 的 VLC 播放 如 也 支持 它 。 
2. Vorbis (OGG) 


— jk JTURHJ Se. BUE, Firefox, Opera 和 Chrome 都 对 其 提供 文 持 。 我 们 可 以 发 现 OGG 
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也 可 以 同 Theora 和 VP8 视频 编 解 码 顷 相配 合 。Vorbis 文件 的 音频 质量 非常 好 ， 但 是 对 其 提供 文 
持 的 硬件 音乐 播放 硼 却 不 多 。 


3. MP3 


尽管 MP3 FANGE ERUIT. 18 Firefox 和 Opera 却 不 对 其 提供 支持 ， 因 为 它 也 受 专利 保 
护 。Safari 和 Google Chrome 支持 MP3, 


视频 编 解码 器 和 音频 编 解码 器 需要 打包 在 一 起 才能 发 布 和 播放 。 现 在 我 们 来 看 看 视频 容器 。 
7.2.0 ”容器 和 编 解码 器 协同 工作 


容 右 是 一 个 元 数据 文件 ， 用 于 识别 和 混合 音频 或 视频 文件 。 实 际 上 ， 容 如 中 并 不 包 舍 关于 其 
中 所 含 信息 的 编码 方式 的 信息 ， 关 键 是 容 副 “包装 ”音频 和 视频 流 。 通 第 容 副 可 以 保存 任意 类 型 
的 已 编码 媒体 组 合 ， 不 过 我 们 将 会 在 讨论 在 Web 上 处 理 视频 时 看 到 这 些 组 合 。 


a OGG RA, NE Theora 视频 和 Vorbis 音频 ， 得 到 了 Firefox, Chrome 和 Opera 的 支持 。 

O MP4 Rir, AE H.264 视频 和 AAC 音频 ，Safari 和 Chrome 对 其 提供 支持 ， 同 时 可 以 被 
Adobe 的 Flash Player 播 放 ， 也 可 以 在 iPhone, iPod fH iPad 上 播放 。 

Q WebM zs , HH] VP8 视频 和 Vorbis 音频 ,被 Firefox, Chrome, Opera 和 Adobe Flash Player 
文 持 。 


鉴于 Google 和 Mozilla 正在 推进 VP8 和 WebM, PELA Theora 最 终 会 走向 消亡 。 但 是 从 事物 
的 外 在 来 看 ， 我 们 仍然 需要 对 视频 进行 两 次 编码 ， 即 为 Apple 用 户 编 码 一 次 (尽管 Apple 的 桌面 
份额 很 小 ， 但 在 美国 移动 设备 中 所 占 的 份额 却 非常 大 )， 然 后 为 Firefox 和 Opera 用 户 编码 一 次 ， 
因为 这 两 个 浏览 器 者 拒绝 支持 H.264, " 


说 来 话 长 , 不 过 现在 我 们 已 经 了 解 了 一 些 编 解 码 如 和 容 强 的 历史 及 限制 , 接 下 来 让 我 们 深入 
到 实际 实现 中 ， 先 从 音频 开始 。 








7.3 ”实例 15: 音频 


AwesomeCo 正在 开发 一 个 网 站 ， 要 在 网 站 中 展示 截屏 视频 (sereencast) 中 可 以 使 用 的 免 版 
税 音频 。 应 该 会 有 一 个 示范 页 面 ， 页 面 中 展示 一 组 独立 的 音频 片段 。 完 成 之 后 ， 我 们 会 看 到 一 个 
音频 片段 列表 , 并 且 访 问 者 可 以 快速 试听 每 个 音频 片段 。 我 们 无 需 担 心 如 何 收 集 这 个 项 目 中 的 各 
类 音频 片段 ， 因 为 客户 端的 音频 工程 师 已 经 为 我 们 准备 好 了 MP3 和 OGG 格式 的 音频 样本 。 附 录 


(D 参见 http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-June/020620.html , 
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C 给 出 了 关于 如 何 编码 音频 文件 的 一 些 信息 。 
7.3.1 建立 基本 列表 


音频 工程 师 已 经 为 我 们 提供 了 4 个 音频 样本 : drums, organ, bass 和 guitar。 我 们 需要 使 
用 HTML 标记 来 分 别 描述 它们 。 下 面 是 对 drums 的 描述 : 
Download html5 audio/audio.html 


«article class-"sample"» 
«header» «h2»Drums «/h2» «/header» 
«audio id-"drums" controls» 
«source src-"sounds/ogg/drums.ogg" type-"audio/ogg'» 
«source src-"sounds/mp3/drums.mp3" type-"audio/mpeg'"» 
«a href-'"sounds/mp3/drums .mp3"»Download drums.mp3«/a» 
«/audio» 
«/article-» 


我 们 首先 定义 了 一 个 audio 7038, 并 且 指 明 需 要 显示 一 些 控件 。 接 下 来 为 文件 定义 多 个 播放 
源 。 先 定义 音频 样本 的 MP3 和 OGG 版 本 ， 接 着 显示 一 个 超 链接 ， 使 得 在 浏 览 合 不 支持 audio 
元 素 的 情况 下 ， 用 户 可 以 通过 这 个 超 链 接 直 接 下 载 MP3 文件 。 








这 段 非常 简短 的 代码 在 Chrome, Safari 和 Firefox 中 都 可 以 运行 。 我 们 继续 将 其 他 3 份 音频 
样本 的 代码 一 并 添加 到 HTMLS 模板 中 : 


Download html5 audio/audio.html 


«article class-"sample"» 
«header» «h2»Drums «/h2» «/header» 
«audio id-"drums" controls» 
«source src-"sounds/ogg/drums.ogg" type-"audio/ogg'» 
«source src-"sounds/mp3/drums.mp3" type-"audio/mpeg'"» 
«a href-"sounds/mp3/drums .mp3"»Download drums.mp3«/a» 
«/audio» 
«/article» 
«article class-'"sample"» 
«header» «h2»Gui1 tar«/h2» «/header» 
«audio id-"guitar" controls» 
«source src-"sounds/ogg/guitar.ogg" type-'"audio/ogg' > 
«source src-"sounds/mp3/guitar.mp3" type-'"audio/mpeg' > 
«a href-z'"sounds/mp3/guitar.mp3"»Download guitar.mp3«/a» 
«/audio» 
«/article» 


«article class-" sample" 
«header» «h2»0rgan«/h2» «/header» 
«audio id-"organ" controls» 
«source src-"sounds/ogg/organ.ogg" type-"audio/ogg'» 
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«source src-"sounds/mp3/organ.mp3" type-"audio/mpeg'"» 

«a href-"sounds/mp3/organ.mp3"»Download organ.mp3«/a» 
«/audio» 
«/article- 


«article class-" sample" 
«header» «h2»Bass«/h2» «/header» 
«audio id-"bass" controls» 
«source src-"sounds/ogg/bass.ogg" type-'"audio/ogg'» 
«source src-"sounds/mp3/bass.mp3" type= audio/mpeg > 
«a href-"sounds/mp3/bass .mp3"»Download bass.mp3«/a» 
«/audio» 
«/article» 
«/body» 
</html> 


当 我 们 在 支持 HTMLS WA R 2$ FRTTAEIXXA DUIBIBJIS S, 如 图 7-1 所 示 , 列表 中 的 每 个 实体 都 
会 有 目 己 的 音频 播放 融 。 在 这 个 页 面 中 ， 按 下 Play 按钮 后 ， 议 览 带 会 目 己 处 理 音 频 的 播放 。 
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7-1 Safari 中 的 页 面 效 果 


在 Internet Explorer 中 打开 这 个 页 面 的 话 ， 我 们 会 看 到 下 载 链接 ， 因 为 浏 览 器 不 识别 audio 
标签 。 这 是 一 种 尚 佳 的 回 退 方案 ， 不 过 还 有 更 合适 的 ， 让 我 们 来 试 试看 。 


7.3.2 EIR 
audio 元 素 目 身 内 租 了 音频 的 回 退 文 持 。 我 们 使 用 source 元 素 定 义 了 多 种 音频 源 , JEB ETE 


了 音频 文件 的 下 载 链接 。 如 琳 阅览 右 无 法 解析 audio 元 素 ， 它 就 会 显示 我 们 放 在 里 面 的 链接 。 我 
们 还 可 以 更 进一步 ， 在 定义 完 首 频 源 之 后 ， 使 用 Flash 作为 回 退 方案 
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然而 这 也 许 并 非 了 最 佳 方案 。 因 为 我 们 很 可 能 遇 到 一 个 支持 audio 元 素 , 但 不 文 持 所 提供 音频 
格式 的 议 贤 强 。 例 如 ， 开 发 人 员 可 能 觉得 无 需 浪 费时 间 去 为 同一 个 音频 准备 多 种 格式 的 文件 源 。 
此 外 ，HTMLS5S 规 艺 特别 指出 ，audio 的 回 退 支持 内 容 不 应 是 将 被 屏 硕 阅读 融 读 取 的 。 

最 简单 的 方案 是 将 下 载 链接 移出 audio 元 素 ， 然 后 用 JavaScript RIR E : 


Download html5_ audio/advanced audio.html 











«article class-"sample"» 
«header» «h2»Drums «/h2» «/header» 
«audio id-"drums" controls» 
«source src-"sounds/ogg/drums.ogg" type-"audio/ogg'» 
«source src-"sounds/mp3/drums.mp3" type-"audio/mpeg'"» 
«/audio» 
«a href-z'"sounds/mp3/drums .mp3"»Download drums.mp3«/a» 
«/article» 


Ana ALAS Lao] audio AHE, ZAJGBeoecbEDEBU I. BEA, TE 
JavaScript 中 创建 一 个 新 的 audio 元素， 检测 其 对 canPlayType OZ; EE] Wi] : 
Download html5 audio/advanced audio.html 
var canPlayAudioFiles = !!(document.createElement( 'audio ) .canPlayType); 
我 们 评测 啊 应 结果 ， 然 后 把 代码 中 所 有 赂 人 套 的 销 都 隐 残 掉 : 


Download html5_ audio/advanced audio.html 


$ (function O 1 
var canPlayAudioFiles = !!(document.createElement( 'audio').canPlayType); 


ifC(canPlayAudioFiles)1 
$(".sample a").hideO; 
DE 
333 


音频 的 回 退 方案 相对 简单 ， 并 且 一 些 用 户 实际 上 还 挺 喜欢 这 样 直 接 下 载 文件 的 功能 。 
训 览 如 原 生 播 放 音频 只 是 抛砖引玉 。 剖 览 侣 中 音频 和 视频 的 HTMLS JavaScript API 才刚 刚 起 
步 ， 详 见 7.4 节 的 “JavaScript 的 媒体 内 容 API 。 


7.4 实例 16: RAMI 

AwesomeCo 希望 在 其 Web 站 点 中 展示 其 新 制作 的 一 系列 视频 教程 ， 并 且 和 而 望 这 些 视 频 能 
持 尽 量 多 的 设备 ， 特 别 征 让 ad。 作 为 一 次 实验 ， 我 们 已 经 在 “Photoshop Tips" ”系列 中 提供 了 两 个 
视频 ,我 们 将 会 用 它们 建 并 原型。 我 们 已 经 有 了 H.264, Theora 和 VP8 格式 的 视频 文件 ， 因 此 可 
以 专注 于 编写 页 面 。 





了解 更 多 关于 编码 视频 文件 的 信息 ， 参 见 附录 C, 
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video 标签 同 audio 非常 类 似 。 我 们 只 需要 提供 视频 源 ， 然 后 在 无 需 任 何 插 件 的 情况 下 ， 
Chrome, Firefox, Safari, iPhone, iPad 以 及 Internet Explorer 9 就 能 直接 播放 视频 了 。 第 一 个 视 
频 文件 01 blur 的 标记 如 下 : 
Download himl5videoy/index.himl 


<article> 
<header> 
<h2>Saturate with Blur</h2> 
</header> 
«video controls» 
«source src-'"video/h264/01 blur.mp4"» 
«source src-'video/theora/01 blur.ogv > 
«source src-'video/webm/01 blur.webm > 
«p»Your browser does not support the video tag.«/p» 
«/video» 
«/article» 


我 们 定义 的 是 带 有 控件 的 video 标签 。 不 使 用 autoplay BENA Re HZ D a, rh E] JJ 
播放 视频 。 

为 确保 Web 训 览 右 知 道 如 何 处 理 视 频 文 件 , 我 们 还 需 新 建 一 个 .htaccess 文件 , 并 使 之 与 为 视 
MEX MIME 类 型 的 Web 页 面 位 于 同一 文件 夹 中 ， 如 下 所 示 : 


Download html5video/.htaccess 





AddType video/ogg .ogv 
AddType video/mp4 .mp4 
AddType video/webm .webm 


一 旦 将 这 些 文件 上 传 到 Web HRS ss, 4E TEC) RUBROS UT TEC AB Pod "Pd HUE 
到 如 图 7-2 PRAIRIE o 


Saturate with Blur 








7-2 [EH] Safari 的 HTMLS 视频 播放 器 播放 视频 
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我 们 还 无 法 兼顾 使 用 Internet Explorer 8 及 更 老 浏 览 器 的 用 户 。 对 此 的 处 理 方式 古 使 用 Flash, 
1.4.1 ER 





我 们 将 Flash 对 象 代码 放置 在 video 标签 中 ， 目 的 在 于 既 能 提供 基于 Flash 的 同 
时 又 不 影响 HTMLS video 的 使 用 。Video For Everybody’ 网 站 中 对 此 有 详细 的 描述 这 里 我 
们 只 做 基本 的 实现 。 


Flowplayer 是 一 款 基 于 Flash 的 播放 器 ， 可 以 播放 使 用 H.264 编码 的 视频 。 下 载 该 播放 器 的 
开源 版 本 ， 然 后 将 flowplayer-x.x.x.swf 和 flowplayer-controls-x.x.x.swf 两 个 文件 放置 在 项 目的 swf 
文件 夹 中 ， 这 样 文件 结构 束 组 织 好 了 。 


接 下 来 将 下 述 代 码 写 在 video 标签 内 ， 紧 跟 在 最 后 一 个 source 元 素 之 后 


Download html5video/index.html 





«object width-2"640" height-"480" type-"application/x-shockwave-flash" 
data- "swf/flowplayer-3.2.2.swf"» 
«param name="movie" value-"swf/flowplayer-3.2.2.swf" /> 
«param name-"allowfullscreen" value="true" /> 
«param name="flashvars" 
value2'config-í"clip":("ur1" :"../video/h264/01 blur.mp4", 
"autoPlay":false, 
"autoBuffering" :true 
$ 
l /> 
«img src-"video/thumbs/01 blur.png" 
width-2"640" height-"264" alt-2"Poster Image" 
title2-"No video playback capabilities." /> 
</object> 


特别 要 广 意 这 段 代 码 : 
Download html5video/index.html 


«param name-"flashvars" 
value2'config-("clip":("ur1":"../video/h264/01 blur.mp4", 
"autoPlay":false, 
"autoBuffering" :true 
上 
p /> 


视频 文件 的 路 径 应 该 是 针对 Flowplayer 的 相对 路 径 。 由 于 我 们 将 Flowplayer 放 在 了 swf 文 件 夹 内 ， 
因此 为 了 确 你 播放 如 能 顺利 播放 视频 ， 应 该 使 用 路 作 ../video/h264/01_blur.mp4。 


(D 参见 http://videoforeverybody, 
© 参见 http://flowplayer.org/download/index.html, 
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这 里 使 用 了 自 闭合 标签 。 之 前 我 们 提 到 过 ， 在 HTMLS 中 无 需 对 <img> 和 <source> 等 空 标签 
进行 自 闭 合 。 但 是 有 一 些 旧 的 训 览 绒 不 能 正确 识别 <source> 元 素 ,， 进 而 无 法 显示 回 退 内 容 。 这 种 
情况 下 ， 建 议 对 <source> 元 素 进 行 自 闭合 。 

当 我 们 在 Internet Explorer 中 浏览 此 页 面 的 上 时候， 视频 可 以 正常 播放 ， 无 需 再 将 其 转换 为 其 
他 格式 ， 这 多 亏 了 Flowplayer, {EH Internet Explorer 的 用 户 将 会 看 到 如 图 7-3 所 示 的 页 面 。” 


Saturate with Blur 





LLLI LLLI 
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Duplicate the layer 


00:00 





7-3. 在 使 用 了 Flowplayer 的 Internet Explorer 中 显示 视频 


当然 ， 要 想 顾 全 到 既 没 安装 Flash， 同 时 浏览 吉 又 不 原生 支持 video 的 用 户 ， 我 们 还 需要 进 
一 步 的 改进 。 我 们 将 会 在 另 一 段 中 能 入 下 载 链接 ， 让 这 类 用 户 能 够 下 载 视频 内 容 : 
Download htmlb5video/index.html 


«section class-" downloads" 
«header» 
«h3»Downloads«/h3» 
«/header» 
«ul» 
<li><a href-z'"video/h264/01 blur.mp4"»H264, playable on most platforms«/a»«/li» 
<li><a href-'"video/theora/01 blur.ogv"»0GG format«/a»«/li» 
<li><a hrefz'"video/webm/01 blur.webm"»WebM format«/a»«/li» 
«/ul» 
«/section-» 


我 们 可 以 借助 JavaScript EA E as 3c Pr HTMLS video 的 情况 下 隐 茂 这 些 下 载 链接 , AH P Wr: 


function canPlayVideo() { 
return !!document.createElement( 'video').canPlayType; 


(D Flash 的 默认 安全 设置 可 能 会 禁止 Flowplayer WMA, BRIERE cas TUTUSURDAE Ed Web WB s ss e DRE). 
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if(canPlayVideo()){ 
$(#videos .downloads) .hide() ; 
j 


JavaScript 的 媒体 内 容 API 


本 章 ， 我 们 泛泛 地 讲解 了 关于 audio 和 video 元 素 的 JavaScript API。 完 整 的 API 可 以 
检测 浏览 器 可 播放 音频 文件 的 类 型 ， 并且 提供 控制 音频 元 素 回 放 的 方法 。 


在 7.3 节 ,我 们 建立 了 一 个 谋 有 多 个 示例 音频 的 页 面 。 我 们 可 以 使 用 JavaScriptAPI 让 这 
些 音频 同时 (基本 上 ) 播放 。 下 面 是 一 种 非常 简单 的 处 理 方式 : 
Download htmli5 audio/advanced audio.html 


var element - $("«p»«input type-'button' value-'Play all'/»«/p»") 
element.click(functionO) Í 
$C"audio").each(functionO 1 
this.playO; 


l; 
DE 
$C"body").append(element); 
代码 中 创建 了 一 个 “Play all ”按钮 ， 被 校 下 的 时 候 ， 这 将 影响 到 页 面 中 全 部 的 audio 
元 素 ， 并 对 每 个 audio 元 素 都 会 调用 playO, 
我 们 也 可 以 对 视频 进行 类 似 操作 。 对 于 视频 ， 有 播放 、 暂 停 黄 至 是 查询 当前 播放 进度 的 


不 过 在 写 这 本 书 的 时 候 ，JavaScript API 得 到 的 支持 度 还 不 够 。 尽 管 如 此 ， 我 们 还 是 应 
该 多 了 解 规范 ， 寻 找 新 的 可 能 性 。 





* http://www.w3.org/TR/html5/video.htmlzmedia-elements , 


这 里 用 的 检测 技术 同 7.3 节 中 的 非常 类 似 。 这 个 例子 中 ， 我 们 允许 用 户 将 视频 下 载 下 来 ， 以 
便 过 后 在 iPod 或 记 ad 上 面 观 看 ， 这 样 显得 更 有 意义 。 








7.4.2 HTML5 视频 的 限制 


目前 HTMLS 视频 面临 着 3 种 非常 重要 的 形势 ， 限 制 了 其 使 用 。 





首先 ，HTMLS5 视频 不 支持 流 式 传输 和 播放 视频 文件 。 用 户 已 经 习惯 了 跳 转 到 一 段 视频 中 的 


104 > £73 KAEMI 


任意 位 置 进行 播放 。 在 这 点 上 ， 基 于 Flash 的 视频 播放 如 是 比较 擅长 的 ， 这 要 归功 于 Adobe 在 将 
Flash 作为 一 种 视频 传输 平台 方面 做 的 巨大 努力 。 要 在 HTMLS video 中 跳 转 播放 ,视频 文件 必须 
已 完整 加 载 至 放 览 如 。 这 一 上 扩 可 能 会 随 着 时 间 的 推移 而 发 生 改 变 。 

其 次 ， 无 法 控制 版 权 。 像 Hulu 这 类 希望 防止 内 容 被 盗版 的 网 站 就 不 能 依赖 于 HTMLS 
video。 这 种 情况 下 ，Flash 仍然 是 一 种 比较 合适 的 解决 方案 。 

最 后 , 也 是 最 重要 的 , 对 视频 进行 编码 成 本 高 耗 时 长 。 对 于 必须 以 多 种 格式 对 视频 进行 编码 ， 
这 让 HTMLS video 的 吸引 | 力 大 大 降低 了 。 因 此 ， 我 们 看 到 很 多 网 站 提供 了 受 版 权 你 护 的 H.264 
格式 的 视频 ， 以 便 在 iPod fü iPad 上 播放 ， 同 时 混合 使 用 了 HTML5 video 标 丛 和 Flash。 

XX EE JEAN HTMLS 的 后 腿 ， 但 却 征 我 们 在 使 用 HTML5 video 符 代 Flash， 来 作为 视 
频传 输 平 台 前 需要 提前 了 解 的 。 








留意 成 人 娱乐 产业 


从 电子 商务 到 Flash 的 蔓延 ， 成 人 娱乐 产业 深 深 地 影响 了 因特网 技术 . ”HTML5 video 
的 到 来 让 这 个 影响 继续 深入 了 下 去 . 工 相 比 台式 电脑 和 笔记 本 电脑 , 类似 iPhone 和 iPad 这 类 
设备 更 私人 化 ， 而 且 不 支持 Flash。 因 此 ,很 多 面向 成 人 的 站 点 已 经 开始 将 视频 传输 平台 由 


Flash 转向 了 H.264 编码 的 HIMLS。 有 意思 的 是 ， 虽 然 HIMLS 的 视频 当前 没有 任何 版 权 保 
护 机 制 ， 但 他 们 似乎 并 不 在 意 。 


成 人 产业 从 来 不 惧怕 风险 ， 出 于 他 们 对 技术 的 兴趣 ， 我 们 很 有 可 能 看 到 在 HTMLS 视频 
方面 的 一 些 喜人 的 发 展 。 





*  http:/chicagopressrelease.com/news/in-tech-world-porn-quietly-leads-the-way , 
T http:;//hews.avn.com/articles/Joone-Points-to-HTML -5-as-Future-of- Web-Content-Delivery -401434.html , 


7.4.9 ” 首 频 、 视 频 和 可 访问 性 


对 于 残 队 用户 来 说 ， 上 面 那些 回 退 方案 都 无 法 真正 发 挥 作 用 。 实 际 上 ，HTML5 规范 明确 指 
出 了 这 一 点 。 听 觉 有 障碍 的 用 户 不 会 觉得 能 下 载 音频 文件 有 多 大 意义 ， 视 党 有 障碍 的 用 户 对 于 在 
训 览 侣 之 外 还 能 够 观看 视频 也 不 感 兴趣 。 当 我 们 将 内 容 提供 给 用 户 的 时 候 , 应 该 尽 可 能 提供 可 行 





(D 参见 http:/www.hulu.com。 
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的 替代 解决 方法 。 视 频 和 音频 文件 应 该 有 对 应 的 字幕 ， 以 供用 户 阅 读 。 对 于 目 创 的 内 容 来 说 ， 如 
末 在 一 开始 就 规划 的 话 ， 字 大 就 很 容易 生成 ， 因 为 可 以 直接 取 目 你 所 编写 的 剧本 。 假 如 没 办 法 生 
成 一 份 字幕 ， 可 以 考虑 用 一 段 总 结 性 的 语句 来 摘 述 视频 的 重 氮 内 容 。 


Download html5video/index.html 





«section class-"transcript'"» 
«h2»Transcript«/h2» 
«p»We'll drag the existing layer to the new button on the bottom of 
the Layers palette to create a new copy.«/p» 
<p>Next we'll go to the Filter menu and choose "Gaussian Blur". 
We'll change the blur amount just enough so that we lose a little 
bit of the detail of the image.«/p» 
<p>Now we'll double-click on the layer to edit the layer and 
change the blending mode to "Overlay". We can then adjust 
amount of the effect by changing the opacity slider.«/p» 
«p-Now we have a slightly enhanced image.</p> 
«/section» 


我 们 可 以 选择 隐藏 字 攻 或 者 从 视频 主页 链接 它 。 总 之 ， 只 要 容 多 看 到 也 容易 跳 转 ， 那 么 就 会 
起 到 很 好 的 效 采 。 


7.4.4 ”未 来 展望 


训 砚 震中 一 流 的 音频 支持 为 开发 人 员 开 辟 了 大 量 新 的 可 能 。JavaScript 开发 的 Web 应 用 可 以 
在 无 需 借 助 Flash 舱 入 音频 的 情况 下 触发 音效 和 提醒 。 原 生 音 频 支 持 可 以 让 视频 直接 在 iPhone 等 
设备 上 播放 ， 也 给 出 了 一 种 开放 的 、 标 准 化 的 方式 来 进行 JavaScript 与 视频 的 交互 。 最 重要 的 ， 
通过 将 视频 和 音频 进行 语义 标注 ， 让 其 多 于 识别 ， 我 们 将 可 以 像 操 作 图 片 一 样 操作 视频 和 音频 。 


tha 
CIC 


作为 Web FRAR, 我 们 总 是 希望 用 户 界 面 能 更 加 引 人 注 目 , 而 CSS3 提供 了 很 多 种 实现 方 
法 。 我 们 可 以 在 页 面 上 使 用 自 定 义 的 字体 ， 可 以 创建 圆 角 元 素 和 阴影 ， 可 以 使 用 渐变 的 背景 色 ， 
甚至 可 以 旋转 元 素 ， 使 其 看 起 来 不 那么 单调 枯燥 。 我 们 无 需 借 助 Photoshop 或 者 其 他 图 像 软件 ， 
即 可 实现 上 述 所 有 内 容 ， 而 本 半 将 介绍 这 些 实现 方法 。 首先， 我 们 会 为 表单 添加 圆 角 效果 ， 使 其 
看 起 来 更 加 柔和 和 。 然 后， 为 即将 迎 来 的 贸易 展 宽 做 一 个 横幅 广告 。 通 过 此 示例 ， 我 们 将 了 解 到 如 
何 添加 阴影 、 旋 转 、 淘 变 和 透明 度 。 最 后 ,我 们 会 讨论 CSS3 的 @font-face 属性 的 使 用 方法 , 12 
属性 可 以 帮助 我 们 在 公司 的 博客 上 使 用 更 加 漂亮 的 字体 。 
本 章 ， 我 们 会 详细 介绍 CSS3 的 如 下 属性 。 
D border-radius[border-radius: 10px;] 一 一 元 素 的 圆 角 属性 , [C4,. F3, IE9, S32, 010.5] 
a 对 RGBa 的 支持 [background-color: rgba(255,0,0,0.5);] 一 一 使 用 RGB 颜色 和 透明 
度 ， 而 韭 16 进 制 颜色 码 。[C4、F3.5、IE9、S3.2、0O10.1] 
a 阴影 效果 [box-shadow: 10px 10px 5px #333;] 一 一 为 元 素 创 建 表 影 。[C3、F3.5、IE9、 
S3.2. 010.5] 
a 旋转 [transform: rotate(7.5deg) ;]— JEREC., [C3. F3.5, IE9, S3.2, 010.5] 
a 渐变 [1inear-gradient(top，#fff，#efefef) ;] 一 一 创建 渐变 图 片 。[C4、F3.5、S4] 
D Qfont-face [Qfont-face { font-family: AwesomeFont; ] 


src: url(http://example.com/awesomeco.ttf); font-weight: bold; }]j] 人 允许 通过 CSS 
使 用 特定 字体 。[C4、F3.5、IE5+、S3.2、0O10.1] 


8.14 实例 17: 创建 圆 角 


Web 页 面 上 的 元 素 默认 都 是 长 方形 的 。 不 论 征 表单 域 、 表 格 ， 还 是 页 面 的 区 段 ， 都 有 着 块 状 
的 、 校 角 分 明 的 外 观 。 因 此 ， 多 年 来 众多 Web 设计 师 一 直 致 力 于 使 用 各 种 技术 为 这 些 元 素 添 加 
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角 效 末 ， 以 便 使 用 户 界 面 看 起 来 更 柔和 一 些 。 


CSS3 可 以 轻松 地 实现 圆 角 ，Firefox 和 Safari 浏览 器 已 经 对 此 提供 支持 好 长 时 间 了 。 不 过 
Internet Explorer 还 不 支持 这 点 ， 但 我 们 可 以 轻松 地 解决 这 个 问题 。 


8.1.1 圆 角 化 登录 表单 


从 目前 项 目的 框架 和 原型 图 中 我 们 看 到 ， 表 单 域 邵 古 圆 角 的 。 先 用 CSS3 来 实现 这 些 圆 角 。 
我 们 的 目标 是 做 出 如 图 8-1 所 示 的 页 面 。 


Log in 


Email 


Password 
Log in 


8-1 圆 角 的 表单 


登录 表单 的 HTML 非常 倍 单 ， 如 下 所 示 : 
Download css3roughedges/rounded corners.html 


«form actionz"/login" method-"post"» 
«fieldset id-2"login"» 
«legend»Log in«/legend» 
«ol» 
«li» 
«label forz"email"-Email«/label» 
«input id-2"email" type-z"email" namez"email"» 
</li> 
«li» 
«label fors"password"»Password«/label» 
«input id-2"password" type="password" 
name-"password" value="" autocomplete-" off"/» 
«/li» 
«li»«input type="submit" value-"Log in"»«/l1i» 
«/ol» 
«/fieldset» 
«/ form» 


再 来 应 用 一 些 样 慌 ， 使 表单 变 得 稍微 好 看 一 氮 : 
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Download css3roughedges/style.css 


fieldsetí 
width: 216px; 
border: none; 
background-color: #ddd; 
} 


fieldset legend{ 
background-color: #ddd; 
padding: 0 64px 0 2px; 
} 


fieldset»olílist-style: none; 
padding:0; 
margin: 2px; 
} 
fieldset»ol»1i1í 
margin: 0 0 9px 0; 
padding: 0; 
} 


/* 让 输入 框 独 立成 行 */ 

fieldset inputí 
display:block; 

上 

inputí 
width: 200px; 
background-color: Zfff; 
border: 1px solid #bbb; 

} 


input[type="submit"]{ 
width: 202px; 
padding: O0; 
background-color: #bbb; 
} 


这 些 基本 的 样式 去 除了 列表 中 的 项 目 符号 ,并 且 保 证 输入 框 的 大 小 都 古 一 样 的 。 在 此 基础 上 ， 
我 们 开始 对 元 素 应 用 圆 角 样式 。 


8.1.2 ”特定 于 浏览 器 的 选择 器 


由 于 CSS3 规 艺 还 没 生 成 终 稿 ， 各 剖 览 右 厂 商 分 别 加 入 了 各 目的 独特 功能 ， 并 在 目 己 特定 的 
功能 前 面 加 上 了 前 缀 。 这 样 的 话 ， 即 使 有 些 功 能 还 役 纳入 最 终 规 苑 ， 训 览 右 三 商 也 可 以 通过 这 些 
前 绥 来 ?| 入 它们 。 同 时 ， 由 于 这 些 功 能 并 不 严格 符合 规范 ， 所 以 训 蝎 右 广 商 可 以 在 实现 规范 标准 
功能 的 同时 保持 上 自己 的 实现 。 大 多 数 情况 下 ， 提 供 前 缀 的 版 本 与 CSS AREAN, [HE 
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不 一 样 的 时 候 。 因 此 ， 麻 烦 丢 给 了 开发 人 员 ， 我 们 需要 为 每 种 剖 览 右 分 别 定 义 不 同 的 亡 界 半径 


(border radius ) 。 


Firefox 使 用 的 选择 器 为 : 
Download css3roughedges/style.css 
-moz-border-radius: 5px; 


基于 WebkitHJjX|Wizs, 4H] Safari 和 Chrome, (EMAITERA: 


Download css3roughedges/style.css 


-webkit-border-radius: 5px; 
为 了 将 页 面 上 的 输入 控件 都 圆 角 化 ， 需 要 定义 如 下 所 示 的 CSS; 


Download css3roughedges/style.css 


input, fieldset, legendí 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 


} 

把 上 述 代码 添加 到 style.css 文件 中 ， 束 会 得 到 圆 角 效果 。 
8.1.3 [BR 

上 面 的 内 容 可 以 在 Firefox、Safari、Google Chrome jl 5i zs FP iE $3511, 但 在 Internet Explorer 
训 览 左下 无 法 正 币 显示。 确实 ， 我 们 的 网 站 必须 支持 Internet Explorer。 因 此 ， 需 要 想 个 办 法 来 解 
Bx IE DI ot as FP 7C AE 58$ E ZH IRR, 

很 早 以 前 ，Web FEA o3 SIL H3 lal £8 Ee Fr E BF Boe Sc» LER FP, 不 过 我 们 希望 实现 起 来 


越 向 单 越 好 。 可 以 使 用 JavaScript 来 检测 圆 角 半径 ， 然 后 使 用 任意 圆 角 技术 来 实现 圆 角 。 比 如 ， 
我 们 可 以 使 用 jQuery、jQuery 的 圆 角 插件 以 及 专门 用 于 文本 输入 框 的 修改 版 圆 角 插件 。 


8.1.4 检测 对 圆 角 的 支持 


我 们 的 回 退 解 决 方案 ， 与 4.3.2 市 的 回 退 方案 极为 类 似 。 我 们 将 引入 jQuery 库 及 插件 ， 并 检 
测 浏 览 器 是 否 支 持 CSS3 属性 。 如 采 不 支持 ， 则 需要 油 活 插件 。 因 此 ， 我 们 需要 检测 CSS 属性 
border-radius 是 否 存 在 ， 并 同时 检查 带 有 浏览 占 (An webkit 和 moz) 特定 前 级 的 相应 属性 
是 否 存在 。 


创建 corner.js， 添 加 如 下 方法 : 
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Download css3roughedges/corner.js 


function hasBorderRadiusO(t 
var element = document.documentElement; 
var style = element.style; 
if (style){ 


return typeof style.borderRadius == "string" || 
typeof style.MozBorderRadius == "string" || 
typeof style. AiebicrtBorderfaditus == "string" || 
typeof style.KhtmlBorderRadius == "string"; 
} 
return null; 





XE, 我们 就 可 以 检测 信 览 妖 是 否 支 持 圆 角 了 。 接 下 来 ,添加 对 圆 角 的 实现 代码 。 非 常 入 运 
的 是 ， 我 们 有 插件 可 以 利用 


8.1.5 jQuery Corners 


jQuery Corners 是 一 个 小 插件 ， 通 过 使 用 div 标签 及 样式 对 元 素 进行 包装 来 实现 圆 角 。 但 是 
无 法 实现 表单 域 的 圆 角 。 不 过 kaiia T Mv an E dU 
域 的 圆 角 。 


这 样 做 是 否 值得 


本 例 中 ,客户 希望 将 所 有 浏览 器 都 实现 为 圆 角 。 不 过 ， 如 果 可 能 的 话 ， 我 们 应 该 始终 将 
这 些 功能 当做 可 选 功 能 。 有 些 人 会 认为 柔 化 表单 样式 确实 有 很 大 好 处 ， 但 我 们 首先 应 该 考虑 
的 是 有 多 少 用 户 的 浏览 器 不 支持 基于 CSS 的 圆 角 。 如 果 访 问 者 大 多 是 Safari 和 Firefox 的 用 
户 ， 那 么 我 们 就 不 值得 花费 时 间 编 写 和 维护 圆 角 功 能 检测 代码 和 回 退 脚本 。 


首先 ， 获取 jQuery Corners， 并 在 HTML 页 面 中 链接 它 。 同 时 ，cornerjs 也 要 链接 进来 : 


Download css3roughedges/rounded corners.html 


«script src-"jquery.corner.js" charset-"utf-8" type-'text/javascript'»«/script» 
«script src-"corner.js" Jcharset-"utf-8" type-'text/javascript'»«/script» 


下 面 我 们 来 添加 实现 圆 角 的 代码 。 


(D 参见 http://www.malsup.com/jquery/corner/。 
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8.1.6 ”自制 表单 圆 角 插件 


这 一 三 ， 我 们 将 编写 一 个 jQuery 插件 ， 使 用 该 插件 可 以 轻松 地 将 所 有 表单 域 都 圆 角 化 。 我 
们 已 在 3.3.3 WIA T jQuery 插件 的 编写 方法 ， 这 里 束 不 再 描述 该 过 程 了 。 这 里 讨论 的 代码 征 音 
分 基于 Tony Amoyal 的 解决 方案 的 一 种 实现 ， 我 们 会 将 此 插件 的 代码 整体 过 一 遍 。 


在 cornerjs 中 加 入 如 下 代码 : 
Download css3roughedges/corner.js 


Cfunction($) 1 


$.fn.formCorner = function(O 1 
return this.each(function() { 
var input = $(this); 
var input background = input.css("background-color"); 
var input border = input.cssC"border-color"); 
input.css("border", "none"); 
var wrap width = parselnt(input.css("width")) + 4; 
var wrapper = input.wrap("«dT1v»«/d1v»").parent(); 
var border = wrapper.wrap("«div»«/div»").parent(); 
wrapper.cssC"background-color", input background) 
.css( "padding", "1px"); 
border.css( packground-cojor ,1nput border) 
.CssC"width" , wrap width + "px") 
.css('padding', 'l1px'); 
wrapper.corner(" "round 5px"); 
border.corner("round 5px"); 
LE 
}; 
}) (jQuery); 


我 们 所 讨论 的 jQuery 对 象 可 能 是 一 个 元 素 , 也 可 能 古 一 组 元 素 , 我 们 将 使 用 两 个 div URE, 
实现 圆 角 。 首 先 , 将 内 层 di v 的 颜色 设置 为 与 表单 原始 的 背景 色 一 致 ， 去 掉 表 单 域 的 边框 。 然 后 ， 
我 们 使 用 与 表单 边框 原始 颜色 一 致 的 背景 色 填 充 第 二 个 div, 并 留 一 些 边 距 。 这 个 边 距 实现 了 边框 
的 轮廓 。 可 以 想象 一 下 ， 有 两 张 方形 纸 ， 一 张 是 4 英寸 宽 的 绿 纸 ， 一 张 是 3 英寸 宽 的 红 纸 ， 当 把 
小 的 放 在 大 的 正 上 面 时 ， 可 以 看 到 红 纸 的 外 面 有 一 个 绿色 的 边框 。 我 们 的 实现 与 这 个 原理 相同 。 








8.1.7 ÆRE 





有 了 插件 和 对 圆 角 的 检测 类 库 ， 我 们 就 可 以 生成 贺 角 了 。 


© 参见 http://www.tonyamoyal.com/2009/06/23/text-inputs-with-rounded-corners-using-jquery-without-image/。 
Q 1 英寸 =0.0254 米 。 一 一 编者 注 
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在 corner.js 中 加 入 如 下 代码 : 


Download css3roughedges/corner.js 


Linel $(function(){ 
2 if(!hasBorderRadius()){ 
3 $C" input").formCorner(); 
4 $C("fieldset").corner("round 5px"); 
5 $("legend").corner("round top 5px cc:Zfff'); 
6 j 
7 }); 
我 们 将 3 个 表单 控件 和 控件 组 做 成 了 圆 角 。 在 第 5 行 ， 只 将 legend 上 方 设置 为 了 圆 角 ， 并 


将 余下 的 切 角 设 为 白色 。 揪 件 使 用 当前 层 的 背景 色 作 为 切除 部 分 的 颜色 ， 这 在 本 例 中 并 不 适用 。 


ADR zd border-radius 属性 ， 我 们 的 插件 就 可 以 运行 。 如 果 不 支 持 ， 之 前 添加 的 
CSS yt x HEC. 


8.1.8 微调 


IE 对 legend 的 处 理 稍 有 不 同 。 我 们 可 以 通过 微调 样式 来 解决 表单 控件 组 的 legend Æ IE X 
贤 絮 中 显示 偏 上 的 问题 ， 使 其 在 正中 的 显示 效 末 能 与 在 Firefox 和 Chrome 中 一 样 。 
Download css3roughedges/rounded corners.html 


«link rel="stylesheet" href-"style.css" type="text/css" media-"screen"» 
<!--[if IE]» 
«style» 
fieldset legendímargin-top: -10px } 
«/style» 
«l![endif]--» 


这 样 , EA EMA A ar FEDERE REA TU, T o 图 8-2 就 是 在 Internet Explorer 13 92 gF P HJ v. 
IMAR e 





A air f Login | | 


Log in 
Emai 


Password 


Log in 





8-2 Æ Internet Explorer 中 的 圆 角 表单 
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贺 角 增加 了 页 面 的 柔和 性 ， 而 且 比 较 容易 实现 。 需 要 注意 的 是 ， 如 同 其 他 方面 的 设计 一 样 ， 
要 适当 地 使 用 圆 角 ， 千 万 不 要 滥用 。 


8.2 ”实例 18: 使 用 阴影 、 渐 变 和 变换 


尽管 对 圆 角 的 关注 占 了 很 大 篇 幅 ， 但 这 仅仅 是 我 们 探索 CSS3 的 开始 。 我 们 可 以 为 元 素 添 加 
阴影 使 它们 相对 于 其 他 内 容 突显 出 来 ， 可 以 使 用 渐变 , 使 背景 看 起 来 更 明确 ， 也 可 以 使 用 变换 
来 旋转 元 素 。 让 我 们 综合 使 用 这 些 技 术 为 即将 到 来 的 AwesomeConf 做 个 横幅 广告 , AwesomeConf 
是 AwesomeCo 每 年 都 要 举办 的 商业 展览 交流 会 。 图 形 设 计 师 提供 了 如 图 8-3 所 示 的 一 个 PSD 
片 。 我 们 可 以 完全 通过 CSS 实现 标志 、 阴 影 ， 甚 至 调整 透明 度 。 人 物 的 背景 图 片 是 唯一 需要 图 
片 设计 师 提 供给 我 们 的 东西 。 


pi, My Name BS 
= 


~ 











图 8-3 ”初始 概念 图 ， 可 以 通过 CSS3 创建 出 来 


8.2.1 基础 结构 


让 我 们 先 从 HTML 页 面 的 基础 结构 做 起 : 


Download css3banner/index.html 


«div id-"conference'» 
«section id-"badge"» 
<h3>H1, My Name Is«/h3» 
«h2»Barney«/h2» 
«/section» 


«section id="info"> 
«/section» 
«/div» 


对 基础 结构 应 用 如 下 的 样 去: 
Download css3banner/style.css 


Zconferenceí 
background-color: 7000; 
width: 960px; 
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float:left; 
background-image: url('images/awesomeconf.jpg'); 
background-position: center; 
height: 240px; 
j 
#badge{ 
text-align: center; 
width: 200px; 
border: 2px solid blue; 
} 


#info{ 
margin: 20px; 
padding: 20px; 
width: 660px; 


eod AOA aaa 
NCY. LOUDX, 


#badge, #info{ 
float: left; 
background-color: Zfff; 


#badge h2{ 
margin: 0; 
color: red; 
font-size: 40px; 


} 


#badge h3í 
margin: 0; 
background-color: blue; 
color: Zfff; 

Í; 


对 页 面 应 用 上 述 样 式 表 后 ， 可 以 使 标志 与 内 容 区 域 并 排 显示 ， 如 图 8-4 所 示 。 接 下 来 让 我 们 


来 修饰 标志 。 


Hi, My Name Is 


rad 


- 


H 
< 





图 8-4 ”横幅 广告 初稿 
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8.2.2 ”增加 渐变 


修改 标志 的 定义 ， 将 其 背景 色 由 白色 改 为 从 白 到 浅 灰 的 渐变 色 。 渐 变样 式 在 Firefox, Safari 

和 Chrome 中 都 会 被 支持 ,但 是 特定 于 Firfox 的 实现 方法 却 不 同 。Chrome 和 Safari 都 使 用 Webkit 

的 语法 ， 按 最 原始 方案 来 实现 ， 而 Firefox 使 用 的 语法 与 W3C 方案 的 类 似 。 同 样 ， 需 要 使 用 训 览 
器 前 级 (参见 8.1.2 节 )。” 
Download css3banner/style.css 


#badge{ 
background-image: -moz-linear-gradient( 
top, #fff, #efefef 
); 


background-image: -webkit-gradient( 
linear,left top, left bottom, 
color-stop(0O, Zfff), 
color-stop(1, £Zefefef) 


‘N 


"E 


background-image: linear-gradient( 
top, Zfff, #efefef 
23 
j 


Firefox fii FH -moz-linear-gradient F4, ZDF ui RE E LAE HE EE. ER JE 
色 和 终点 的 颜色 。 

基于 Webkit 内 核 的 谭 览 器 允许 我 们 设置 中 间 节 点 的 颜色 。 在 本 例 中 ， 我 们 只 需要 从 白色 洁 
变 到 灰色 ,但 如 果 还 需要 渐变 到 其 他 颜色 ， 那 么 只 需要 增加 一 个 新 的 中 间 节 点 颜色 就 可 以 了 。 
8.2.3 给 标志 加 上 阴影 


为 标志 加 阴影 也 很 测 单 . 加 上 阴影 可 以 使 其 看 起 来 像 是 突显 在 横幅 广告 的 前 面 , 增加 立体 感 。 
传统 的 做 法 是 使 用 Photoshop 给 图 片 加 上 阴影 或 者 以 背景 图 片 的 形式 插入 阴影 ， 而 使 用 CSS3 的 
box-shadow 属性 ， 可 以 轻松 地 为 页 面 元 素 实现 阴影 效果 。” 

将 该 属性 加 入 到 样式 表 中 ， 为 标志 增加 阴影 效果 : 


Download css3banner/style.css 


#badge{ 


(QD 参见 http://dev.w3.org/csswg/css3-images/#linear-gradients 。 
Q 参见 http://www.w3.org/TR/css3-background/#the-box-shadow , 
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-moz-box-shadow: 5px 5px 5px #333; 
-webkit-box-shadow: 5px 5px 5px #333; 
-0-box-shadow: 5px 5px 5px 7333; 
box-shadow: 5px 5px 5px £333; 

} 


box-shadow 属性 有 4 个 参数 ,第 一 个 是 水 平 偏 移 量 , 正 数 代表 阴影 会 出 现在 目标 元 素 的 右边 ， 
负数 代表 阴影 会 出 现在 元 素 左边 。 第 二 个 参数 是 垂直 偏 移 量 , 正 数 代表 阴影 会 出 现在 目标 元 素 的 
下 面 ， 负 数 代表 出 现在 目标 元 素 的 上 面 。 


第 三 个 参数 是 模糊 半径 。 值 为 0 的 时 候 ， 阴 有 影 看 起 来 非常 清晰 尖锐 。 值 越 大 ， 阴 影 越 模糊 。 
最 后 一 个 参数 定义 了 阴影 的 颜色 。 


我 们 需要 不 停 地 调整 这 些 参数 ,来 体会 其 工作 原理 ， 并 找到 那 组 适合 我 们 的 参数 。 当 使 用 阴 
影 时 ， 需 要 首先 调研 一 下 现实 生活 中 阴影 的 原理 。 用 一 束 光 照射 在 物体 上 ， 或 者 到 外 面 去 观 侍 阳 
光 下 物体 的 阴影 。 这 个 调研 韭 第 重要 ， 因 为 如 末 创 建 了 一 些 不 协调 的 阴影 ， 尤 其 古 对 多 个 元 素 使 
用 了 不 正确 的 阴影 时 , 会 使 用 户 界 面 显 得 更 加 混乱 。 最 简单 的 方法 是 ， 对 每 个 元 素 的 阴影 都 使 用 
相同 的 设置 。 




















文本 上 的 阴影 


除了 对 元 素 增加 阴影 样式 ， 对 文本 也 可 以 添加 阴影 效果 。 这 与 box-shadow 类 似 : 
hliítext-shadow: 2px 2px 2px #bbbbbb;} 
需要 定义 对 了 方向 的 偏 移 量 、 模 糊 度 和 阴影 的 颜色 。IE6、IE7 和 IES 中 也 已 经 通过 使 


用 Shadow 过 滤器 支持 文本 阴影 : 


filter: Shadow(Color=#bbbbbb, 
Directionz135, 
Strength-3); 


这 与 在 元 素 上 应 用 阴影 的 方法 是 一 样 的 。 文 本 上 的 阴影 会 带 来 一 种 精致 的 效果 ,但 是 如 
果 阴 影 太 重 的 话 会 让 文本 变 得 不 容易 阅读 。 


8.2.4 ”旋转 标志 


我 们 可 以 使 用 CSS3 的 变换 来 旋转 、 缩 放 、 倾 斜 元素 ， 就 像 使 用 矢量 图 像 程序 Flash, 
Illustrator, Inkscape 一 样 。 旋转 可 以 使 元 素 更 突出 ,使 Web 页 面 看 起 来 不 再 四 四 方 方 。 让 我 们 





(D 参见 http://www.w3.org/TR/css3-2d-transforms/#transform-property。 
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稍微 旋转 一 下 标志 ， 使 之 不 再 与 条 幅 的 直 边 平行 。 
Download css3banner/style.css 


#badge{ 
-moz-transform: rotate(-7.5deg); 
-o-transform: rotate(-7.5deg); 
-webkit-transform: rotate(-7.5deg); 
-ms-transform: rotate(-7.5deg); 
transform: rotate(-7.5deg); 


J 

使 用 CSS3 进行 旋转 非常 简单 。 我 们 只 需要 提供 旋转 的 角度 ， 页 面 就 会 日 动 泻 染 了 。 被 旋转 
元 素 中 的 所 有 元 素 都 会 跟着 一 块 旋转 。 

实现 旋转 与 实现 圆 角 一 样 简单 ,但 是 不 要 滥用 它 。 界 面 设计 的 目标 是 使 用 户 界 面 更 加 便于 使 
用 。 如 采 旋 转 了 包含 很 多 内 容 的 元 素 , 一 定 要 确保 用 户 阅 读 内 容 的 时 候 不 用 朝 一 个 方向 太 过 扭头 。 


8.2.5 ”调节 背 景 的 透明 度 


在 文本 后 面 加 入 半 透 明 层 来 调 区 透明 度 的 方法 比较 典型 ， 很 早 前 平面 设计 师 就 开始 使 用 了 。 
这 种 方法 通 前 需要 在 Photoshop 中 创建 一 幅 完 整 的 图 卢 或 者 使 用 CSS 在 另 一 个 元 素 的 上 面 放置 一 
个 透明 的 PNG 层 。CSS3 通过 一 种 新 的 语法 提供 了 对 背景 色 透 明度 的 支持 。 





MK BER Web 开发 时 ， 大 家 都 学 习 过 使 用 十 六 进 制 颜色 码 定义 颜色 ， 用 两 个 数字 对 来 表示 
红色 、 绿 色 和 蓝 色 。00 就 是 都 关闭 ， 即 没有 ，FF 就 是 都 开启 。 因 此 红色 就 是 FF0000， 也 可 以 理 
解 为 红色 开局 、 蓝 色 和 绿色 关闭 。 

CSS3 5[A T rgb 和 rgba 函数 。rgb 函数 与 十 六 进 制 表示 法 类 似 , 但 使 用 0-255 的 数字 来 表 
示 每 种 颜色 。 可 以 定义 红色 为 rgb (255,0,0) 。 

rgba 国 数 与 rgb 一 样 ， 只 不 过 多 了 一 个 参数 来 定义 不 透明 度 (0~1)。 如 果 取 值 为 0， 就 什么 
闫 色 也 看 不 到 ， 因 为 是 完全 透明 的 。 如 果 想 得 到 半 透 明 的 白色 区 域 ， 可 以 加 入 如 下 样式 .: 

Download css3banner/style.css 


#info{ 
background-color: rgba(255,255,255,0.95); 


有 时 用 户 显示 堪 的 对 比 度 设置 会 影响 上 述 透明 度 的 效果 , 因此 必须 在 多 种 显示 设置 情况 下 试 
验 ， 才 能 保证 得 到 一 致 的 显示 效 末 。 


让 我 们 将 横幅 广告 的 info 区 域 圆 角 化 : 
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Download css3banner/style.css 


#info{ 
moz-border-radius: 12px; 
webkit-border-radius: 12px; 
o-border-radius: 12px; 
border-radius: 12px; 


Í 
应 用 上 述 样 式 后 ， 条 幅 在 Safari, Firefox 和 Chrome 下 都 能 显示 得 非常 漂亮 了 。 接 下 来 让 我 
们 完成 在 Internet Explorer 中 的 样式 设置 。 


8.2.06 ENR 


本 节 中 使 用 的 技术 , 在 IE9 中 是 有 效 的 , 但 是 在 下 6、IE7 和 IES 中 都 有 一 些 问题 ! 需要 使 用 
微软 的 DirectX 过 滤 颖 来 解决 。 这 意味 着 我 们 需要 依赖 于 条 件 声明 加 载 一 个 只 针对 IE A SSH JTE 
式 表 。 我 们 还 需要 使 用 JavaScript 创建 一 个 section 元 素 ， 然 后 使 用 CSS 来 谊 染 它 ， 因 为 这 些 版 
本 的 正 不 能 原生 识别 该 元 素 。 


Download css3banner/index.html 





«!--[if lte IE 8]» 


«script» 
document.createElement("section"); 
«/script» 


«link rel="stylesheet" hrefz'"ie.css" type="text/css" media-" screen" 


«![endif]--» 
«/head» 
«body» 
«div id-"conference"'» 
«section id-"badge"» 
<h3>H1, My Name Is«/h3» 
«h2»Barney«/h2» 
«/section» 


«section id="info"> 
«/section» 
«/div» 


«/body» 
</html> 


DirectX 过 滤器 在 了 6、IE7、 和 IES 中 都 能 工作 ， 但 是 在 IE8 中 的 触发 方式 不 同 。 因 此 ， 需 
要 对 每 个 触发 器 定义 两 遍 。 下 面 我 们 来 看 下 如 何 旋转 元 素 。 
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8.2.7 ”旋转 





我 们 可 以 使 用 这 些 过 滤 融 来 旋转 元 素 , 但 是 没有 仅仅 定义 旋转 角度 那么 简单 。 为 了 达到 我 们 
想 要 的 效 末 ， 需 要 使 用 Matrix 过 着 兰 ， 并 指定 我 们 需要 角度 的 正 驴 余 足 。 有 具体 来 讲 ， 要 给 函数 
传递 参数 余弦 、 正 弦 的 相反 数 、 正 弦 和 余弦 (与 第 一 个 参数 相同 )， 如 下 所 示 :“ 





Download css3banner/filters.css 


filter: progid:DXImageTransform.Microsoft.Matrix( 
sizingMethod-'auto expand', 
M1120.9914448613738104, 
M12-20.13052619222005157, 
M21--0.13052619222005157, 
M22=0 . 9914448613738104 
25 


-ms-filter: "progid:DXImageTransform.Microsoft.Matrix( 
sizingMethod-'auto expand', 
M11-0.9914448613738104, 
M1220.13052619222005157, 
M21--0.13052619222005157, 
M2220.9914448613738104 


AA? 是 的 , LEE B MATHER. pU Y. 我 们 前 面 希 望 的 转动 角度 是 -7.5 RE, 
因此 ， 本 例 中 人 负 角 的 正弦 为 负数 ， 而 我 们 需要 一 个 正 数 。 


数学 是 挺 难 懂 的 ， 让 我 们 接着 实现 渐变 吧 。 
8.2.8 渐变 


IE A E 2H) UTE OE UI a L3 HS UL DUI A, a PAIR, 只 是 我 们 需要 加 入 较 多 的 代码 , d Doe ESI 
色 和 终点 颜色 ， 就 可 以 实现 新 变 了 : 


Download css3banner/filters.css 


filter: progid:DXImageTransform.Microsoft.gradient( 
startColorStrzZFFFFFF, endColorStrz£ZEFEFEF 

); 

-ms-filter: "progid:DXImageTransform.Microsoft.gradient( 
startColorStr-zZFFFFFF, endColorStr-zZEFEFEF 


HE ibo sen). IX ERATES ECBEEHTEZUSR E, mAH background-image 
属性 上 。 





© 使 用 2x2 和 矩阵 进行 线性 变换 。 
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让 我 们 继续 使 用 这 个 过 滤器 定义 info 区 域 背景 色 的 透明 度 。 
8.29 ”透明度 


渐变 过 滤 絮 可 以 在 起 点 和 终点 的 颜色 码 上 增加 一 个 额外 的 十 六 进 制 值 , 使 用 开始 的 两 位 定义 
透明 度 。 下 面 的 代码 实现 的 效 末 与 我 们 想 要 的 极为 类 似 : 


Download css3banner/filters.css 


background: none; 

filter: 
progid:DXImageTransform.Microsoft.gradient( 
startColorStr-ZBBFFFFFF, endColorStr-ZBBFFFFFF 

25 


-ms-filter: "progid:DXImageTransform.Microsoft.gradient( 
startColorStr-'ZBBFFFFFF', EndColorStr-z'ZBBFFFFFF' 
3 
这 8 位 十 六 进 制 颜色 码 与 rgba 函数 很 类 似 ， 只 是 透明 度 值 放 在 了 最 前 面 而 不 是 最 后 面 。 因 
此 ， 它 们 的 顺序 是 透明 度 、 红 色 、 绿 色 和 监 色 。 








我 们 需要 移 走 元 素 上 的 背景 属性 background) ， 使 其 兼容 IE7。 如 采 大 家 已 经 跟着 上 述 过 程 
创建 了 样式 表 ， 就 会 发 现 上 面 的 代码 还 无 法 正常 显示 ， 后 面 我 们 会 解决 这 个 问题 。 


8.2.10 ”整合 


在 了 正 训 览 右 里 使 用 这 些 过 滤 恬 的 一 个 更 大 的 困难 是 ， 无 法 分 开 定 义 它 们 。 要 对 一 个 元 素 定 
X AES. def HAUT T LUE EAE X. 79— 1 LAXE 2 SB. TE IE DUAL RE 


Download css3banner/ie.css 


#info{ 
background: none; 
filter: 
progid:DXImageTransform.Microsoft.gradient( 
startColorStr-ZBBFFFFFF, endColorStr-ZBBFFFFFF 
) 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( 
startColorStr-'ZBBFFFFFF', EndColorStr-'ZBBFFFFFF' 
I"; 
} 
#badge{ 
filter: 
progid:DXImageTransform.Microsoft.Matrix( 
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sizingMethod-'auto expand', 
M1120.9914448613738104, 
M1220.13052619222005157, 
M21--0.13052619222005157, 


MYDD 0 QO14A4A48612729104A 
l'lcc—uU.22.L'3TTTOO0.1L2/ JOLUT 


25 

progid:DXImageTransform.Microsoft.gradient( 
startColorStreZFFFFFF, endColorStr=#EFEFEF 

); 

progid:DXImageTransform.Microsoft.Shadow( 
color24333333, Direction-135, Strength-3 

2; 


-ms-filter: "progid:DXImageTransform.Microsoft.Matrix( 

sizingMethod-'auto expand', 
M11-0.9914448613738104, 
M1220.13052619222005157, 
M21--0.13052619222005157, 
M2220.9914448613738104 

), 

progid:DXImageTransform.Microsoft.gradient( 
startColorStreZFFFFFF, endColorStrzZEFEFEF 

Ja 

progid:DXImageTransform.Microsoft.Shadow( 
color24333333, Direction-135, Strength-3 

2 

上 


为 了 得 到 预期 的 效果 ， 加 了 好 多 代码 。 但 事实 证 明 ， 这 些 属性 是 可 用 的 。 观 察 图 8-5， 会 发 
现 已 经 很 接近 我 们 期 望 的 效果 了 。 剩 下 需要 做 的 仅仅 是 将 info 区 域 圆 角 化 ， 可 以 参考 8.1 "hd 
看 如 何 实现 。 


Hi, My Name Ís 
Barney 


[od 


A 





8-5 Internet Explorer8 中 的 横幅 广告 


尽管 这 些 过 滤 背 比较 从 重 ， 还 有 一 点 点 古怪 ,但 是 为 了 给 正 用 户 提供 几乎 一 致 的 用 户 体验 ， 
在 以 后 的 项 目 中 我 们 还 会 经 党 使 用 它们 。 


请 注音， 本 六 中 谈论 的 一 些 效果 部 古 介绍 性 的 ， 当 我 们 创建 初始 的 样式 表 时 ,需要 确保 定义 
了 背景 色 ， 以 确保 文字 的 可 读 性 。 这 样 的 话 ， 即 使 浏览 如 无 法 解析 CSS3 语法 ， 仍 可 以 显示 页 面 
并 使 其 具有 可 读 性 。 
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8.3 ”实例 19: 使 用 实用 的 字体 


排版 风格 对 用 户 体验 来 说 非 稼 重要 。 本 书 的 字体 也 是 精 挑 细 选 的 , 是 由 懂得 如 何 选 用 合适 字 
体 及 合适 间距 的 专家 认真 选取 后 确定 下 来 的 , 目的 在 于 使 读者 获得 轻松 的 阅览 体验 。 这 些 对 于 网 
站 来 说 同样 重要 。 

在 问 读 者 传递 信息 时 ， 我 们 选取 的 字体 会 影响 到 读者 对 信息 的 理解 。 图 8-6 所 示 的 字体 非 第 
适合 一 文 热 情 的 重金 属 乐队 。 但 古 作 为 本 书 的 封面 字体 就 不 太 合 适 了 ， 如 图 8-7 所 示 。 


Pal Band HTHS and C555 


图 8-7 
由 此 可 以 看 出 , 选择 适合 于 文章 内 容 的 字体 真 的 非常 重要 。Web 上 字体 的 缺点 是 开发 者 可 选 
择 的 余地 太 少 ， 只 有 少量 字体 可 用 ， 俗 称 “websafe” 字 体 。 这 些 字体 都 是 在 大 多 数 用 户 操作 系 
统 中 被 广泛 使 用 的 字体 。 


要 解决 这 个 问题 ， 我 们 通 闻 会 将 字体 做 成 图 片 ， 然 后 直接 加 入 到 页 面 中 或 者 通过 CSS 的 方 
法 将 其 当做 背景 图 片 或 者 SIFR ,使 用 Flash fi e^r- f, CSS3 的 字体 模块 提供 了 更 好 的 实现 方式 。 

















8.3.1 QGfont-face 


QGfont-face 指令 实际 上 是 在 CSS2 规 冰 中 引入 的 , 并 得 到 了 Internet Explorer 5 的 支持 。 然 而 ， 
微软 的 实现 方式 是 使 用 一 种 叫做 Embedded OpenType (EOT) 的 字体 格式 ， 而 现在 大 部 分 字体 都 
是 TrueType 或 者 OpenType fX, MATAJ B Rb s asap Open Type 和 True Typep 字体 。 





字体 和 版 权 


有 些 字 体 是 收费 的 , 像 使 用 商业 图 片 或 者 其 他 受 版 权 保 护 的 资料 一 样 ， 需 要 获得 版 权 和 
许可 才 可 以 在 自己 的 网 站 上 使 用 。 如 果 购 买 了 某 套 字体 , 需要 在 权利 范围 之 内 使 用 在 自己 网 
站 的 logo 或 者 图 片上 。 这 叫做 使 用 许可 (usage right)。 然 而 ，@font-face 带 来 了 一 种 不 同 
IMALE ETA 分 发 权利 。 





(D 参见 http://www.mikeindustries.com/blog/sifr, 
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当 在 页 面 上 网 入 一 种 字体 时 ,用 户 就 需要 下 载 该 字体 ,意味 着 你 的 网 站 正在 分 发 字体 给 
别人 。 你 需要 确认 正在 使 用 的 字体 版 权 绝 对 允许 这 样 做 。 
Typekit 有 含 很 多 字体 的 带 有 版 权 的 字体 库 ， 并 提供 工具 和 代码 让 我 们 能 轻松 地 将 字体 


集成 到 自己 的 网 站 中 。 但 是 他 们 不 免费 提供 服务 , 不 过 如 果 我 们 需要 使 用 菜 种 字体 ， 其 收费 
是 非常 便宜 的 。 


Google 提供 了 Googe Font APT, 5 Typekit 类 似 ， 但 是 它 仅 提供 开源 字体 。 


这 些 服 务 都 是 通过 JavaScript 加 载 字 体 ， 因 此 需要 开发 者 注意 ， 要 保证 禁用 JavaScript 
的 用 户 页 面 的 可 读 性 


只 要 记得 一 点 ， 对 待 字 体 要 如 同 对 待 其 他 资产 一 样 ， 这 样 就 不 会 遇 到 任何 麻烦 了 。 





x  http://www.typekit.com/, 
T http://code.google.com/apis/webfonts/, 





AwesomeCo 的 销售 主管 要 求 对 公司 的 印刷 品 和 网 站 使 用 统一 的 字体 。 网 站 需要 引入 一 种 免 
费 的 简单 字体 Garogier。 作 为 一 次 试验 ， 我 们 会 将 这 一 字体 应 用 于 2.1 节 中 创建 的 博客 示例 上 。 
这 样 ， 大 家 就 可 以 看 到 该 字体 的 实例 应 用 了 。 





V/ 小 乔 爱 问 
V 如 何 转换 自 定义 的 字体 ? 


如 果 开 发 人 员 开 发 了 自 定义 的 字体 或 者 购买 了 一 种 字体 ， 需 要 使 其 在 多 种 格式 下 生效 ， 


那么 可 以 借助 FontSquirre 网 站 上 面 的 一 个 转换 器 (converter ) , 它 可 以 提供 转换 后 的 字体 以 及 
我 们 需要 的 带 有 Qfont-face 代码 的 样式 表 。 但 是 需要 确认 我 们 的 字体 版 权 是 否 允 许 这 么 做 。 





* http://www.fontsquirrel.com/fontface/generator , 





9.9.2 字体 格式 


字体 拥有 多 种 格式 ， 目 标 训 览 侣 会 决定 将 什么 格式 的 字体 呈现 给 用 户 。 
格式 及 浏览 器 支持 情况 


D Embedded OpenType (EOT) [IE5-8] 


124 > £83 条 化 视觉 体验 


D TrueType (TTF) [IE9, F3.5, C4, S4] 

Q OpenType (OTF) [IE9, F3.5, C4, S4, 010.5] 
Q Scalable Vector Graphics (SVG) [IOS] 

Q Web Open Font (WOFF) [IE9, F3.6] 


Internet Explorer 9 之 前 的 浏览 器 只 支持 一 种 格式 ， 即 Embedded OpenType (EOT). Hte XI 
tà, as Wet TrueType FU OpenType 两 种 格式 都 能 所 供 很 好 的 支持 。 


Microsoft、Opera 和 Mozilla 联合 起 来 创建 了 支持 无 损 压缩 的 Web Open Font 格 式 ， 同 时 对 字 
体制 作者 来 说 ， 优 化 了 许可 管理 。 


H TRAMA ZEAE, RREFERA Ae PER. 








8.3.3 改变 字体 
FontSquirrel 网 站 中 有 很 多 种 字体 ， 如 TrueType, WOFF, SVG FH EOT 格式 的 字体 ， 其 使 用 
效 朱 很 好 。 


字体 的 使 用 包含 两 个 步 又, 即 定义 字 体 和 将 其 应 用 在 元 素 上 。 在 博客 的 样式 表 中 , 添加 如 下 
代码 : 








Download css3fonts/style.css 


Qfont-face { 
font-family: 'GarogierRegular'; 
src: url('fonts/Garogier unhinted-webfont.eot'); 
src: url('fonts/Garogier unhinted-webfont.woff') format('woff'), 
urlC'fonts/Garogier unhinted-webfont.ttf') format('truetype'), 
urlC'fonts/Garogier unhinted-webfont.svg£webfontewOqE009') format('svg'); 
font-weight: normal; 


j 

Hc. WI DEX ITEHMRAASU. WCPIAASU—4 4. MA VEBSGCHRHUBEBE. SX DER IR 
Embedded OpenType 的 链接 放 在 了 了 最 前 面 ， 这 样 IE 可 以 立即 解析 它 ， 之 后 依次 提供 了 其 他 链接 。 
用 户 的 浏览 硕 会 依次 答 试 ， 直 到 找到 一 个 可 以 使 用 的 格式 。 


定义 了 字体 系列 后 ， 就 可 以 在 样式 表 中 使 用 了 。 人 和 修改 之 前 的 字体 样式 ， 如 下 所 示 : 





© 参见 http:/www.fontsquirrel.comy/fonts/Garogier 或 本 书 的 下 载 代码 。 
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Download css3fonts/style.css 


body 
font-family: "GarogierRegular"; 


j 
过 这 个 小 小 的 改变 ， 页 面 文字 将 以 新 字体 显示 ， 如 图 8-8 所 示 。 





AwesomeCo Blog! 
Latest Posts Archives Contributors Contact Us 


How Many Should We Put You Down For? 


Posted by Brian on October rst, 2010 at 2:39PM 


The first big rule in sales is that if the person leaves empty-handed, "Never give someone a chance 
they're likely not going to come back. That's why you have to be to say no when selling your 
somewhat aggressive when you're working with a customer, but product." 


you have to make sure you don't overdo it and scare them away. 


One way you can keep a conversation going is to avoid asking questions that have yes or no answers. For 
example, if you're selling a service plan, don't ever ask "Are you interested in our 4 or 4 year service plan?" 





8-8 ”使 用 了 新 字体 的 博客 
应 用 一 种 字体 对 当前 主流 浏览 絮 来 说 相对 比较 容易 , 但 是 我 们 必须 萎 虑 不 支持 这 些 属性 的 其 
AEII SE ZF o 
8.3.4 EIR 
我 们 已 经 对 多 版 本 的 IE KEWA E rte T ERD, (HAMRE DU A rA CE 
Gfont-face 属性 时 ， 页 面 仍 可 读 。 


我 们 提供 了 Garogier 字体 的 奉 代 版 本 ， 但 是 应 用 该 字体 的 时 候 ， 却 并 没有 指定 任何 备用 字 
DR. AiE, KA Eat Garogier 字体 时 ， 只 能 使 用 说 览 促 的 默认 字体 显示 ， 这 和 契 不 够 
理想 的 。 
学 体 栈 是 一 个 有 优先 级 的 字体 列表 。 我 们 可 以 首先 定义 最 希望 用 户 看 到 的 字体 ， 然 后 定义 
其 他 字体 作为 适合 的 备用 字体 。 
当 定义 字体 栈 的 时 候 ， 需 要 额外 伦 些 时 间 来 确认 合适 的 备用 字体 。 字 符 的 间 跑 、 笔 触 的 宽度 
和 整体 的 外 观 都 应 该 是 相似 的 。UnitInteractive 网 站 上 有 一 篇 关于 这 个 问题 的 很 棒 的 文章 。” 


如 下 修改 字体 : 





(QD 参见 http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/, 
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Download css3fonts/style.css 


font-family: "GarogierRegular", Georgia, 
"Palatino", "Palatino Linotype", 
"Times", "Times New Roman", serif; 


这 里 提供 了 很 多 备用 字体 ， 可 以 帮助 我 们 维持 页 面 的 相似 外 观 。 即 使 这 样 做 了 ， 也 不 能 保证 
在 任何 情况 下 都 能 完美 运行 ,但 是 至 少 比 仅仅 依赖 默认 字体 要 好 ， 因 为 默认 字体 有 时 候 是 很 不 适 
合 阅读 的 。 

字体 在 使 页 面 更 有 吸引 力 和 更 加 易 读 方面 会 大 有 帮助 ， 因 此 建议 大 家 在 实际 工作 中 多 多 斌 
验 。 现 在 已 有 很 多 免费 的 和 商用 的 字体 可 供 我 们 使 用 。 


8.3.5 ”未 来 展望 


本 革 , 我们 探讨 了 一 些 使 用 CSS3 蔡 换 传统 Web 开发 技术 的 方法 , 但 是 这 些 技术 还 只 是 皮毛 。 
CSS3 规 冰 还 引入 了 3D 变换 甚至 简单 的 动画 ,也 就 是 说 我 们 可 以 利用 样式 表 辣 用 户 提供 交互 信息 ， 
而 不 古 使 用 JavaScript, ES 1587] : hover 时 一 样 。 

此 外 ,一 些 训 跷 仑 已 经 文 持 复 合 育 景 图 片 和 产 变 辽 框 。 最 后 ， 也 请 关 广 一 下 对 网 页 内 容 本 刁 
的 改进 ， 如 滚动 的 头 部 和 尾部 以 及 对 页 码 的 支持 。 


在 CSS3 模块 完成 之 后 ， 我 们 便 可 以 更 加 简单 容易 地 为 用 户 创 建 更 丰富 的 、 更 完美 的 和 更 受 
欢迎 的 界面 元 素 。 因 此 ， 一 定 要 多 加 关注 新 属性 。 








goz 
客户 端 数据 的 使 用 


前 面 讨 论 了 HTMLS 和 CSS3 的 标记 , 现在 我 们 将 注意 力 转 癌 与 HTML5 相关 的 技术 和 功能 。 
拿 跨 文档 消息 机 制 和 离线 支持 两 个 功能 来 说 , 它们 可 以 辅助 我 们 实现 跨 域 信息 交互 , 为 用 户 创建 
可 离线 使 用 的 解决 方案 

诸如 Web Storage, Web SQL Databases 和 Web Sockets 等 一 些 标准 都 是 从 HTMLS i zo; h xl es 
出 来 的 ， 而 像 Geolocation FH fl — Er EEEREN A ER eh HUE, [Bod sias] mU 
发 人 员 却 将 其 与 HTML5 联系 到 了 一 起 ， 因 为 HTMLS Hye [a] x EE) SEE H TIEXER 


本 书 中 的 这 一 部 分 将 涉及 这 些 功能 ， 并 为 现在 束 能 使 用 的 功能 给 了 予 更 高 的 关注 。 我 们 还 将 使 

M btc told. 让 我 们 先 从 Web Storage 和 Web SQL Storage AF, xu 
可 以 让 我 们 在 客户 端 存储 数据 。 

还 能 想起 来 在 什么 情况 下 能 对 cookie 紧 起 大 拇指 吗 ? 我 也 想 不 起 来 。 确 实 ， 目 从 cookie 出 
现 之 后 ， 对 其 处 理 一 直 都 很 令 人 头疼 ,但 是 我 们 容忍 了 这 样 的 麻烦 ， 因 为 毕竟 它 是 过 去 唯一 能 在 
客户 器 机 器 中 存储 数据 的 方式 。 使 用 cookie 的 话 ， 我 们 需要 为 其 命名 ， 还 要 设置 其 失效 时 间 。 

其 中 涉及 一 组 以 函数 形式 存在 的 JavaScript 代码 ， 用 函数 封装 后 我 们 无 需 考 虑 其 工作 原理 ， 
WRX FE: 


Download html5 localstorage/setcookie.js 








// 访 问 http://www.javascripter.net/faq/settinga.htm 
function SetCookie(cookieName,cookieValue,nDays) { 
var today = new Date(); 
var expire - new Date(); 
if (nDays--null || nDays==0) nDays-1; 
expire.setTime(today.getTIime() + 3600000-*24*«nDays); 
document.cookie = cookieName- "-"*escape(cookieValue) 
+ "expires-"-«expire.toGMTString(O; 


} 
抛 开 难 记 的 语法 不 说 ,安全 因素 也 是 需要 考虑 的 。 一 些 站 点 使 用 cookie 存储 用 户 的 剂 览 行为 ， 


9.1 实例 20: 使 用 localStorage 保存 参数 设置 号 129 


所 以 有 的 用 户 会 禁用 cookie, 


HTMLS 引入 了 在 客户 端 存储 数据 的 一 些 新 选择 : Web Storage" (使 用 localStorage 或 
sessionStorage) 和 Web SQL Databases 。 两 者 使 用 起 来 都 很 方便 ， 难 以 置信 得 强大 ， 有 具有 合理 的 
安全 性 ,最 重要 的 是 ,日 前 一 些 义 蜗 絮 已 经 实现 了 这 两 个 功能 ,包括 10S 的 Mobile Safari FH Android 
2.0 的 Web 训 览 器 。 然 而 ， 它 们 不 属于 HTML5 规范 ， 而 是 刊 离 出 来 形成 了 各 自 独 立 的 规范 。 











在 客户 端 和 服务 器 数据 共享 方面 ， 虽 然 localStorage, sessionStorage 和 Web SQL 
Databases 不 能 奉 代 cookie， 例 如 Web 框架 还 需要 使 用 cookie 来 维护 请 求 旧 的 状态 信息 ， 但 是 我 
们 可 以 使 用 它们 保存 仅 用 户 关 心 的 内 容 ， 如 外 观 设置 或 参数 设置 等 。 使 用 它们 也 可 以 很 方便 地 创 
建 运行 在 久 蜗 絮 中 的 移动 应 用 ， 而 这 种 移动 应 用 的 运行 无 需 连 接 到 因特网 。 当 前 很 多 Web 应 用 
都 是 调用 服务 絮 来 保存 用 户 数 据 的 , 但 使 用 这 些 新 的 存储 机 制 的 话 ， 因 特 网 连接 就 不 再 是 绝对 的 
依赖 条 件 了 。 用 户 数据 可 以 在 本 地 存储 并 在 需要 时 进行 备份 。 

当 我 们 将 这 些 方法 与 HTMLS 的 离线 功能 结合 起 来 的 时 候 , 便 可 以 在 浏览 侨 中 建立 可 跨 各 种 平 
台 运 行 的 完整 的 数据 库 应 用 , 这 些 平台 包括 个 人 电脑 、iPad 以 及 Android 手机 等 。 通 过 本 章 的 介绍 ， 
我 们 可 以 学 到 如 何 使 用 这 些 技 术 来 进行 用 户 设置 的 持久 化 ， 以 及 如 何 建立 一 个 简单 的 留言 数据 库 。 


本 草 涉 及 如 下 功能 。 


a localStorage 一 一 以 键 / 值 对 的 形式 存储 数据 ， 与 某 个 域 绑 定 ， 数 据 可 跨 训 览 红 会 话 保持 。 
[C5. F3.5, S4, IE8, 010.5, IOS, AJ] 

a sessionStorage——L/ BE/[EDNE JE Ner fi za , EST ENDE. DUM az ARI EH 
Ex. [C5, F3.5, S4, IE8, 010.5, IOS, A] 

Q Web SQL Databases ———5E 5E JO ZR E, XCPPXRILSEAS ELTE OE. A, SGT. MER 
ERIRE. SEDIR E, BeA aaar. [C5. S32. 010.5, IOS32, A2] 

O Offline Web Applications (离线 Web 应 用 ) 一 一 定义 缓存 文件 是 为 了 方便 离线 使 用 ， 以 便 
应 用 能 够 运行 在 没有 因特网 连接 的 坏 境 下 。[C4、S4、F3.5、0O10.6、1IOS3.2、A2] 











9.1 实例 20: 使 用 localStorage 保存 参数 设置 


对 于 希望 在 客户 端 机 器 上 持久 保持 数据 的 开发 人 员 开 说 ，1ocalStorage 机 制 提供 了 一 种 非 
常 简便 的 方法 。1ocalStorage 机 制 简 单 来 说 就 是 垦 入 在 Web 训 览 右 中 的 名 / 值 对 存储 。 





(D 参见 http://www.whatwg.org/specs/web-apps/2007-10-26/fistorage 
© 参见 http://www.whatwg.org/specs/web-apps/2007-10-26/fisql , 
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由 localStorage 存储 的 信息 可 中 浏览 右 会 话 保 持 ， 由 于 它 被 限制 在 当前 访问 的 域 中 ， 所 以 
不 可 被 其 他 站 点 读 取 。” 


AwesomeCo 正在 开发 一 款 新 的 客户 服务 门户 产品 ， 人 允许 用 户 更 改 文本 大 小 、 背 景 以 及 站 点 
的 文字 颜色 。 我 们 将 用 TocalStorage 来 实现 该 功能 ， 以 便当 我 们 保存 设置 的 时 候 ， 配 置 数 据 会 
从 一 个 训 览 历 会 话 保持 到 另外 一 个 。 最 后 完成 的 时 候 ， 效 有 末 如 图 9-1 所 示 。 


e O © Developer Tools - file://localhost/Users/brianhoga... 
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图 9-1 借助 localStorage， 用 户 的 参数 值 存储 在 了 本 地 


9.1.1 创建 参数 表单 


ME, 我们 使 用 HTMLS 语义 标记 和 在 第 3 革 中 所 学 的 一 些 新 表单 控件 来 巧妙 地 制作 一 份 表 
单 。 我 们 会 允许 用 户 更 改 前 景色 、 背 景色 并 调整 字体 大 小 。 


Download html5 localstorage/index.html 


«p»«strong»Preferences«/strong»«/p» 
«form id-"preferences" action-"save prefs" 
method="post" accept-charset- utf-8"» 
«fieldset id-"colors" class-""» 
«legend»Colors«/legend» 
«ol» 
«li» 
«label for-"background color"»Background color«/label» 
«input type-"color" name-"background color" 
value2"" id2"background color"» 
</li> 
<li> 
<label for="text_color">Text color</label> 
<input type-"color" name="text_color" 
value2"" id="text_color"> 
</li> 





进行 本 地 开发 时 要 特别 和 注意。 举例 来 说 ， 如 何 我 们 在 localhost 上 进行 开发 ， 会 很 容易 引起 变量 混淆 。 


9.1 实例 20: 使 用 localStorage 保存 参数 设置 号 131 


«li» 
«label forz"text size'"»Text size«/label» 
«select name-"text size" id-"text size'"» 
«option value-z'"16"»16px«/option» 
«option valuez"20"»20px«/option» 
«option valuez'24"»24px«/option» 
«option valuez'32"»32px«/option» 
</select> 
</ol> 


</fieldset> 


<input type="submit" value="Save changes > 
</form> 


我 们 将 用 HIML 颜色 代码 来 表示 颜色 。 


9.1.2 保存 和 加 载 设置 


通过 JavaScript hia] window.1ocalStorage() 对 象 ， 即 可 使 用 localStorage。 设置 属性 名 和 
属性 值 的 方式 非常 简单 ， 如 下 所 示 : 


Download html5 localstorage/index.html 





localStorage.setItem("background color", $("£Zbackground color").valO); 
获取 属性 值 的 方式 也 很 向 单 : 
Download html5 localstorage/index.html 


var bgcolor = localStorage.getItem("background color"); 
下 面 我 们 创建 一 个 方法 ， 用 来 保存 表单 中 的 所 有 设置 : 
Download html5 localstorage/index.html 


function save settings Ot 
localStorage.setItem("background color", $("Zbackground color").val(O); 
localStorage.setItem("text color", $("£text color").valO); 
localStorage.setItem("text size", $("Ztext size").valO); 
apply. preferences to pageO; 


$ 
接 下 来 创建 一 个 类 似 的 方法 ， 从 localStorage 系统 中 加 载 数据 ， 并 填写 到 表单 相应 域 中 : 


Download htmls_localstorage/index.html 


function load settings()t{ 
var bgcolor = localStorage.getItem(" "background color"); 
var text color = localStorage.getItem("text color"); 
var text size = localStorage.getItem("text size"); 
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$C"Zbackground color").val(bgcolor); 
$("Ztext color").val(text color); 
$("Ztext size").val(text size); 


apply preferences to pageO; 
} 


该 方法 还 会 调用 另 一 个 方法 ， 用 来 将 设置 应 用 到 页 面 上 。 下 面 我 们 来 讨论 这 个 方法 。 
9.1.3 ”应 用 设置 


现在 可 以 从 TocalStorage 中 获取 设置 信息 了 ， 接 下 来 需要 将 其 应 用 到 页 面 上 。 这 里 所 涉及 
的 参数 设置 全 部 与 CSS 相关， 因此 可 以 使 用 jQuery 来 修改 任意 元 素 的 样式 。 


Download html5 localstorage/index.html 


function apply preferences to pageOÍ 
$C"body").cssC"backgroundColor", $("Zbackground color").valO); 
$C"body").css(C"color", $("Ztext color").valO); 
$C"body").css("fontSize", $("£Ztext size").valO + "px"); 

Í; 


wa RRELA, fU 3X — RIIE. 
Download html5 localstorage/index.html 


$(function) { 
load_settings(); 


$C'form#preferences').submit(function(event){ 
event.preventDefault(; 
save settings(); 
2; 
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只 有 最 新 版 的 正 、Firefox、Chrome 和 Safari 才 支持 localStorage 77 因此 我 们 需要 为 旧 
版 本 训 览 右 提 供 回 退 方案 。 我 们 有 多 种 可 选 方式 ， 可 以 将 信息 保存 至 服务 器 ， 也 可 以 在 客户 端 使 
用 cookie 来 保存 参数 设置 。 


1. 服务 器 端 存储 


如 果 系 统 有 用 户 账户 的 功能 ， 可 以 考 虑 将 参数 设置 数据 当做 用 户 记 录 保 存在 应 用 中 。 当 用 户 
登录 的 时 候 ， 首 先 检 测 是 否 存在 客户 问 配 置信 息 ， 如 末 没 有 ， 就 从 服务 如 获取 。 通 过 这 种 方式 ， 
用 户 的 设置 可 以 跨 浏 览 严 、 跨 计算 机 保存 。 








9.1 实例 20: 使 用 localStorage 保存 参数 设置 号 133 





要 采用 服务 侨 保 存 数 据 的 方式 ， 请 确保 表单 数据 能 够 正常 提交 至 服务 器 (AIR CES IN SCIT 
cookie 了 ， 就 请 不 要 再 禁用 JavaScript 默 认 的 提交 行为 了 )。 


如 果 用 户 禁 用 了 JavaScript, 那么 有 效 的 数据 保持 方法 就 只 剩 下 服务 如 端 存储 这 一 种 了 。 因为 
我 们 可 以 在 编写 应 用 时 指定 让 其 从 数据 库 中 获取 设置 信息 ， 而 不 是 从 1ocalStorage 的 散 列 表 中 
获取 。 而 且 对 于 存储 数据 大 于 4 KB 的 情况 来 说 ， 也 只 能 使 用 这 一 种 方式 ， 因 为 cookie 的 数据 存 
储量 最 大 限制 力 4KB。 








2. cookie 和 JavaScript 


cookie 和 JavaScript 的 紧密 结合 ， 可 以 为 我 们 打造 一 种 非常 不 错 的 回 退 方案 。Quirksmode 是 
一 款 堵 名 的 cookie 脚本 ， 我 们 可 以 通过 Quirksmode 建立 上 自己 的 1ocalStorage 回 退 方 案 。 


检测 浏览 右 是 否 支 持 localStorage 非常 简单。 只 需要 检测 window 对 和 象 上 是 否 存在 
localStorage 方法 即 可 : 


Download htmls_localstorage/index.html 


if C!window.localStorage){ 


j 
接 下 来 ,需要 编写 写 入 cookie 的 方法 。 在 这 里 我 们 借用 Quirksmode 的 内 容 。 将 这 些 JavaScript 
国 数 以 大 括号 后 起 来 添加 到 我 们 自己 的 脚本 中 : 


Download html5 localstorage/index.html 


function createCookie(name,value,days) { 

if (days) (1 
var date = new Date(); 
date.setTime(date.getTime()-(days«24*60*60*1000)); 
var expires = "; expires-"-«-date.toGMTString(O; 

] 

else var expires - 

document.cookie = name-"-"-c-value-cexpiresc-"; path-z/"; 


} 


"nir, 
, 


function readCookie(name) { 
var result = "" 
var nameEQ = name 十 
var ca = document.cookie.split(';'); 
for(var 120;i < ca.length;i4-) { 
var c = ca[il; 
while Cc.charAt(0)22' ') c = c.substring(1,c. length); 
if C(c.indexOf(nameEQ) == 0){ 


1 n, 
一 J} 


(D 参见 http://www.quirksmode.org/js/cookies.html, 
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result = c.substring(nameEQ.length,c. length); 
telsef 
result = 


} 


"ni, 


} 


return(result); 


} 
最 后 ， 我 们 希望 创建 localStorage 对 象 ， 让 它 在 后 台 使 用 cookie。 下 面 的 这 个 示例 虽然 不 
成 熟 ， 不 过 足以 将 流程 演示 完整 : 
Download html5 localstorage/index.html 


Linel — TocalStorage = (function O ( 
return 1 
setItem: function (key, value) (1 
- createCookie(key, value, 3000) 
5 Ja 
getItem: function (key) { 
return(readCookie(key)); 
} 
10 了 
12003 
注意 第 4 行 ， 这 里 创建 的 cookie 其 有 效 期 是 从 当前 时 间 往 后 算 起 的 3000 天 。 由 于 无 法 创建 


永远 不 失效 的 cookie， 所 以 这 里 使 用 一 个 极 长 的 时 间 来 代表 永远 。 

在 localStorage 对 象 之 外 ， 使 用 方式 与 原先 无 异 。 如 果 我 们 需要 删除 元 素 或 者 清空 对 象 ， 
则 需要 多 一 点 创造 性 。 乐 观 估计 , 不 久 的 将 来 我 们 便 可 以 握 弃 这 种 劣质 的 兼容 方案 , 完全 依赖 于 
训 览 器 的 localStorage 方法 。 





sessionStorage 


要 想 让 一 些 数据 在 用 户 关闭 Web 浏览 器 之 后 仍然 能 够 保存 ， 可 以 使 用 localStorage, 
但 有 的 时 候 ， 我 们 只 需要 在 浏览 器 打开 的 时 候 保 存 数据 ， 一旦 浏览 器 关闭 ， 就 不 需要 了 。 这 
时 就 要 用 到 sessionStorage, sessionStorage 的 用 法 与 localStorage 一 样 ， 只 是 
sessionStorage 中 存储 的 信息 会 在 浏览 器 会 话 结束 的 时 候 失 效 。 编 写 代 码 的 时 候 仿 照 获取 
localStorage 对 象 的 万 法 ， 获 取 sessionStorage 对 象 。 


sessionStorage.setItem('name', 'Brian Hogan'); 
var name = sessionStorage.getItem( 'name'); 


为 sessionStorage 创建 回 退 方案 也 很 简单 ,只 需要 确保 我 们 创建 的 cookie 能 够 在 浏览 
器 关闭 时 失效 即 可 。 
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9.2 ”实例 21: 在 客户 端 关 系数 据 库 中 保存 数据 


localStorage 和 sessionStorage 为 我 们 提供 了 在 客户 端 计算 机 上 保存 简单 名 / 值 对 数据 的 
一 种 简便 方法 ， 但 有 了 时候 这 是 远 远 不 够 的 。 起 初 ， 在 关系 数据 库 中 存储 数据 的 能 力 是 在 HTMLS 
规范 中 引入 的 。 后 来 这 部 分 发 展 成 了 一 份 独立 的 规范 ， 名 为 Web SQL Storage”。 只 要 开发 人 员 有 
编写 SQL 代码 的 基础 ， 它 使 用 起 来 就 会 非常 顺手 。 为 方便 演示 ， 这 里 将 使 用 Web SQL Storage 来 
创建 、 获 取 、 更 新 和 删除 客户 端 数 据 库 中 的 信息 。 

9.2.1 浏览 器 中 的 CRUD 

所 谓 CRUD, Æ “Create, Retrieve, Update 和 Delete”“ 的 人 简称， 即 创建 、 获 取 、 更 新 和 删 
除 ， 恰 恰 讲 述 了 我 们 使 用 客户 端 数 据 库 会 做 的 事情 。 通 过 其 规 疙 和 实现 ， 我们 可 以 对 数据 进行 增 
删改 查 的 操作 。 

AwesomeCo 希望 用 一 款 可 以 在 销售 人 员外 出 时 收集 留言 的 人 简单 应 用 来 武装 自己 的 销售 队 
伍 。 这 个 应 用 建 好 以 后 , 不仅 可 以 让 用 户 创 建新 留言 ， 还 可 以 使 之 更 新 和 删除 已 有 的 留言 。 要 更 
改 已 有 的 留言 ， 我 们 就 需要 让 用 户 能 先 从 数据 库 中 将 其 取出 来 。 

下 面 的 SQL 语句 就 是 我 们 要 用 到 的 。 





类 型 Ho f 
创建 留言 INSERT INTO notes (title, note) VALUES("Test", "This is a note"); 
获取 所 有 留言 SELECT id, title, note FROM notes; 
获取 特定 留言 SELECT id, title, note FROM notes where id = 1; 
更 新 留言 UPDATE notes set title = "bar", note = "Changed" where id -1; 
删除 留言 DELETE FROM notes where id - 1; 


V/ 小 乔 爱问 ……. 


rm 


x! Web SQL Databases 规范 不 是 已 经 天 折 了 吗 ? 


在 2010 年 11 月 ,维护 这 一 规范 的 工作 组 宣称 不 再 推进 Web SQL Databases ,将 注意 力 转 
向 了 IndexedDB 规范 。 我 们 之 所 以 还 在 这 里 讨论 Web SQL Databases， 是 因为 基于 Webkit 的 
浏览 器 已 经 实现 了 此 功能 ， 和 包括 所 有 iOS 和 Android 设备 、Safari 以 及 Google Chrome。 截 至 
本 书 编写 之 时 ,还 没有 任何 一 种 浏览 器 支持 IndexedDB ,但 我 们 的 项 目 中 马上 可 以 使 用 到 Web 
SOL Databases， 这 或 许 是 满足 我 们 需求 的 正确 之 选 ， 


QD 参见 http://dev.w3.org/html5/webdatabase/, 
© 也 可 以 表示 “Create、Read、Update 和 Destroy” ， 即 创建 、 读 取 、 更 新 和 销毁 。 
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9.2.2 留言 的 前 端 展现 





留言 系统 的 前 端 左 侧 是 一 个 侧 边 栏 ， 其 中 是 罗列 出 留言 的 列表 , 右 侧 包含 一 个 标题 域 和 用 于 
写 留言 的 大 文本 框 。 效 果 见 图 9-2, 
( New note ) (Save ) ( Delete ) 
e First note 
e Second note First note 
Note 





This program lets you take notes and store them in the offline database. 


Hc. 我 们 需要 编写 界面 : 


Download htmlSsql/index.html 


«ldoctype html» 


<html> 
<head> 
<title>AwesomeNotes</title> 
<link rel="stylesheet" href="style.css"> 


«script type-"text/javascript" 
charset- utf-8" 
src= 
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"» 
«/script» 


«script type-"text/javascript" 
charset-"utf-8" src-z"javascripts/notes.js"» 
«/script» 


«/head» 
«body» 
«section id-"sidebar"» 
«input type="button" id-z"new button" value= New note"» 
«ul id-"notes"- 
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«/ul» 
«/section» 


«section id-"main"» 
«form» 
«ol» 
«li» 
«input type="submit" id-"save button" value= Save > 
«input type="submit" id-"delete button" value-"Delete"» 
«/li» 
«li» 
«label forz"title"»Title«/label» 
«input type="text" id-"title"» 
«/li» 
«li» 
«label forz'"note"-»Note«/label» 
«textarea id-"note"»«/textarea» 
«/li» 
«/ol» 
«/form» 
«/section» 


«/body» 
</html> 


我 们 使 用 section 标签 定义 侧 边栏 和 主体 区 域 , 并 且 为 每 个 重要 的 用 户 界面 控件 指定 了 ID， 
例如 Save. (保存 ) 按钮 等 。 这 样 做 可 方便 我 们 定位 元 素 ， 以 便 为 其 附加 事件 监听 器 。 
我 们 还 需要 一 个 样式 表 ， 这 样 才 能 达到 示例 图 中 的 显示 效果 。style.css 如 下 所 示 : 


Download html5sql/style.css 








#sidebar, £Zmainí 
display: block; 


float: left; 
j 
Zsidebarí 
width: 25%; 
j 
#main{ 
width: 75%; 
} 
form ol{ 
list-style: none; 
margin: O0; 
padding: O0; 


} 
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form 11{ 
padding: O0; 
margin: O0; 


l 


form li label{ 
display:block; 
} 


#title, #note{ 
width: 100%; 
font-size: 20px; 
border: 1px solid #000; 
} 


#title{ 
height: 20px; 
j 


notet 
height: 40px; 
} 


这 份 样式 表 茶 用 了 项 目 符 号 ， 定义 了 文本 域 的 大 小 ， 将 元 素 分 成 了 两 列 。 RYE, Bv fA ROSE 
完成 了 。 接 下 来 要 做 的 征 搭配 JavaScript 代码 来 让 其 发 挥 作用 。 


9.2.3 连接 数据 库 


我 们 需要 建立 连接 并 创建 一 个 数据 库 : 
Download htmlssqgl/javascripts/notes.js 


// 数据 库 引 用 
var db = null; 


[|] 创建 到 本 地 数据 库 的 连接 


connectToDB = function() 


c 


1 
db = window.openDatabase('awesome notes', '1.0', 
"AwesomeNotes Database', 102410243); 


15 

首先 ,我 们 在 脚本 顶部 声明 了 db 变量 。 这 样 在 我 们 创建 的 其 余 所 有 方法 中 它 都 会 有 效 。 ER 
后 我 们 使 用 window.openDatabase 方法 声明 了 连接 到 数据 库 的 方法 。 这 里 使 用 的 参数 有 数据 库 
名 称 、 版 本 号 、 描 述 以 及 描述 大 小 的 参数 。 














CD 这 样 做 创建 的 是 全 局 变量 ， 但 十 通常 不 推荐 使 用 。 这 里 只 是 为 了 让 JavaScript 代码 能 够 简洁 多 辨 。 
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9.24 ”创建 留言 


这 里 的 留言 表 需 要 3 yj. An PH. 


+ R 描述 

id 留言 的 唯一 标识 。 主 键 、 整 数 、 自 增 
title 留言 的 标题 ， 以 便于 引用 

Note 留言 


下 面 编写 一 个 方法 来 创建 数据 库 表 : 
Download htmlssqgl/javascripts/notes.js 


createNotesTable = function() 
i 
db.transaction(function(tx) 1 
tx.executeSgql( 
"CREATE TABLE notes (Cid INTEGER \ 
PRIMARY KEY, title TEXT, note TEXT)", [], 
function(){ alert('Notes database created successfully!'); }, 
function(tx, error)í alert(error.message); } ); 
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我 们 在 Mein SQL 语句 。 该 事务 包含 两 个 回调 方法 ， 一 个 针对 执行 成 功 的 情况 ， 
针对 执行 失败 的 情况 。 这 是 以 后 类 似 动 作 中 使 用 的 通用 模式 。 

注意 ，executesq1 0) 方 法 的 第 二 个 参数 是 个 数组 。 该 数组 用 来 将 SQL 中 的 占 位 符 绑 定 到 变 
量 。 这 样 便 避免 了 拼接 字符 串 ， 同 其 他 语言 中 的 prepare 语句 类 似 。 此 处 ， 数 组 是 空 的 ， 因 为 我 
们 的 示例 中 无 需 任何 占 位 符 。 


现在 第 一 个 数据 库 表 融 建 好 了 ， 下 面 我 们 要 让 这 个 应 用 真正 做 点 实际 的 操作 。 








9.2.5 ”加载 留言 


我 们 希望 应 用 加 载 的 时 候 连 接 到 数据 库 (如 末 数 据 库 表 不 存在 就 创建 一 个 ) 然后 从 数据 库 中 
IRENA HY A E o 


Download htmi5sql/javascripts/notes.js 


// 从 数据 库 的 notes 表 中 获取 所 有 记录 
fetchNotes = function(){ 
db.transaction(function(tx) { 
tx.executeSql('SELECT id, title, note FROM notes' , [], 
function(SQLTransaction, data)í 
for (var i = 0; 1 < data.rows.length; ++i) { 
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var row = data.rows.item(1); 
var id = row['id']; 
var title = row['t1itle']; 


addToNotesList(id, title); 
J); 
}; 
该 方法 从 数据 库 中 获取 所 有 记录 。 如 琳 获 取 成 功 ， 就 表 历 所 有 记录 ， 调 用 addNoteToList 
方法 ， 该 方法 如 下 所 未 : 


Download htmi5sql/javascripts/notes.js 


LIR id 和 标题 ， 将 列表 项 添加 到 留言 列表 
addToNotesList = function(id, title)í 
var notes = $("Znotes"); 
var item = $("«11»"); 
item.attr("data-id", id); 
1tem.html (title); 
notes.append(item); 


}; 

我 们 将 记录 的 包租 入 到 目 定义 的 数据 属性 中 。 然 后 在 用 己 单 击 列表 项 的 时 候 , 我 们 会 使 用 
该 ID 定位 数据 库 中 的 记录 。 然 后 将 新 创建 的 列表 项 连同 notes 的 ID 一 起 插入 到 前 端的 无 序列 
表 中 。 现 在 我 们 需要 编写 加 载 数据 的 代码 ， 以 便 在 用 户 在 列表 中 进行 选择 的 时 候 将 其 加 载 到 表 
单 中 。 
9.2.6 获取 指定 记录 


我 们 可 以 为 每 个 列表 项 都 添加 一 个 click 事件 , 但 实践 经 验 告 诉 我 们 ， 有 更 好 的 方法 ， 那 就 
是 监听 整 张 无 序 列表 中 的 单 击 事件 , 然后 判断 被 单 击 的 项 。 这 样 的 话 , 如 果 列 表 中 的 项 增加 了 ( 比 
如 添加 了 一 条 留言 )， 也 无 需 为 其 再 添加 单 击 事 件 了 。 


在 jQuery 函数 中 ， 评 加 如 下 代码 : 


Download htmi5sql/javascripts/notes.js 








$C"Znotes").click(function(event) ( 
if ($Cevent.target).isC'11')) (1 
var element - $(event.target); 
loadNote(element.attr("data-1d")); 
$ 


$3 
它 会 调用 1oadNote 0) 方法 ， 该 方法 如 下 : 
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Download htmlssqgl/javascripts/notes.js 


loadNote = function(id){ 
db.transaction(function(tx) { 
tx.executeSql('SELECT id, title, note FROM notes where id = ?', [1d], 
function(SQLTransaction, data)í 
var row = data.rows.item(0); 
var title = $("Ztitle"); 
var note - $("Znote"); 


title.valCrow["titl1e"]); 
title.attr("data-1id", row["1d"])5; 
note.val(row[ "note" ])5; 

$("Zdelete button" ).showQ; 


133 
1:5 
j 


此 函数 同 先前 的 fetchNotesQ， 很 像 。 其 中 触发 一 条 SQL 语句， 然后 处 理 成 功 的 情况 。 这 里 
的 语句 中 包含 一 个 辐 号 占 位 符 ， 其 实际 值 以 数组 元 素 的 形式 写 在 第 二 个 参数 中 。 

当 查 找到 某 条 记录 的 时 候 , 就 将 其 显示 在 表单 中 。 该 方法 同时 还 会 局 用 Delete 按钮 ， 并 将 记 
录 的 耻 租 入 到 自 定 义 数 据 属性 中 ,这样 便 于 处 理 更 新 操作 。Save 按钮 会 检测 ID 是 否 存在 。 如 条 
存在 ， 束 更 新 记录 。 如 来 不 存 在 ， 就 认为 它 是 一 条 新 记录 。 下 面 我 们 来 编写 这 段 逆 辑 。 





9.2.7 插入 、 更 新 和 删除 记录 


当 用 户 单 击 Save 按钮 的 时 候 ， 要 触发 代码 来 进行 新 数据 插入 或 者 更 新 已 有 数据 。 我 们 将 在 
Save 按钮 上 添加 一 个 单 击 事件 处 理 程序 ， 方 法 古 将 下 面 的 代码 添加 到 jQuery 函数 中 : 


Download html5sql/javascripts/nofes.js 


$("#save_button").click(function(event){ 
event.preventDefault(); 
var title = $("Ztitle"); 
var note = $("Znote"); 


if(title.attr("data-id"))( 
updateNote(title, note); 
yelse{ 
insertNote(title, note); 
} 
393 


此 方法 检测 表单 中 标题 域 的 data-id 属性 。 如 果 没 有 ID， 表单 认为 用 户 在 添加 新 记录 ， 便 
会 触发 insertNote 方法 ， 此 方法 如 下 : 
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Download htmi5sqli/javascripts/notes.js 


insertNote - function(title, note) 


i 
db.transaction(function(tx) 1 
tx.executeSql("INSERT INTO notes (title, note) VALUES (?, ?)", 
[title.val(), note.val Ol, 
function(tx, result)í 
var id = result.insertId ; 
alert('Record ' + 1d+ ' saved! '); 
title.attr("data-id", result.insertlId ); 
addToNotesList(id, titlie.val OO); 
$C"Zdelete button").show(Q; 
15 
function O1 
alert('The note could not be saved. '); 
} 
); 
133 
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insertNoteQ 〇 方法 将 记录 插入 到 数据 库 中 ， 使 用 结果 集 的 insertid 属性 获取 刚 插 入 记录 的 
ID。 然 后 将 其 作为 一 种 自 定义 数据 属性 应 用 到 表单 的 title 域 ， 触 发 addToNotesListQ 〇 方法 将 
留言 添加 到 页 面 左 侧 的 列表 中 。 


接 下 来 ， 我 们 需要 处 理 更 新 事件 。updateNoteO 方 法 同 其 他 方法 类 似 ; 


Download htmi5sql/javascripts/notes.js 


updateNote - function(title, note) 
i 
var id = title.attr("data-1d"); 
db.transaction(function(tx) 1 
tx.executeSql("UPDATE notes set title = ?, note = ? where id = ?", 
[title.val(), note.valO, idj], 
function(tx, result)í1 
alert('Record ' + id + ' updated! '); 
$C"Znotes»li[data-id-" + id + "]").html(Ctitle.val OO); 
Js 
function (O (1 
alert('The note was not updated! '); 


update 语句 成 功 执行 后 ,我 们 通过 data- id 域 中 的 刚 更 新 过 的 ID. 值 更 新 列表 中 的 留言 标题 。 
删除 记录 几乎 同 更 新 是 一 样 的 。 我 们 需要 如 下 所 示 的 删除 事件 处 理 程序 : 


9.2 实例 21: HRP SX AER TS 二 143 


Download htmi5sql/javascripts/notes.js 


$C"Zdelete button") .click(function(event) Í 
event.preventDefault(); 
var title = $("Ztitle"); 
deleteNote(title); 

J): 


接着 ， 编 写 删除 方 法 。 此 方法 不 仅 要 从 数据 库 中 删除 记录 ， 而 且 还 要 在 前 端的 侧 边栏 列表 中 
也 一 并 删除 它 
Download htmi5sql/javascripts/notes.js 


deleteNote = function(title) 


{ 
var id = title.attr("data-id"); 
db.transaction(function(tx) 1 
tx.executeSql("DELETE from notes where id = ?", [id], 
function(tx, result)í 
alert('Record ' + id + ' deleted! '); 
$C"Znotes»li[data-id2" + id + "[J").removeO; 
Ja 
function) { 
alert('The note was not deleted!'); 
l; 
25 
2; 
Ji 


现在 剩 下 的 工作 只 是 清空 表单 了 。 这 样 做 是 为 了 避免 在 创建 新 的 记录 时 意外 地 影响 到 现 有 的 
记录 。 
928 包装 

我 们 的 留言 系统 基本 完成 了 ， 接 下 来 只 需要 激活 New 按钮 即 可 。 按 下 该 按钮 会 清空 表单 ， 


这 样 用 户 便 可 以 在 编辑 完 一 条 留言 后 ， 创 建新 的 留言 。 与 先前 的 模式 一 样 ， 先 从 il 函数 中 
New 按钮 的 事件 处 理 程序 开始 : 


Download html5sql/javascripts/nofes.js 








$("#new_button").click(function(event){ 
event.preventDefault(); 
newNote (); 


135 
//end:newbutton 


newNote(O); 


4353 
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BUB. da "title" WHJ data-id 属性 ， 从 表单 中 移 除 对 应 值 。 在 此 ， 我 们 还 会 隐藏 页 面 
上 的 Delete TZ £f : 


Download htmi5sql/javascripts/notes.js 





newNote = function( (1 
$C"Zdelete button").hideO; 
var title = $("Ztitle"); 
title.removeAttr("data-id"); 
title.val(""); 
var note = $("Znote"); 
note.val("")5; 


l; 

我 们 应 该 在 jQuery 函数 内 部 调用 newFornm 方法 ， 这 样 当 页 面 加 载 的 时 候 表单 就 可 用 了 。 这 
样 的 话 ，Delete 按钮 也 就 隐藏 了 。 

所 有 的 操作 都 完成 了 。 我 们 的 应 用 在 Phone、Android 设备 和 安装 有 Chrome、Safari 和 Opera 
的 计算 机 中 和 运行。 不 过 在 Firefox 中 有 一 定 几 率 可 成 功 ， 而 在 Internet Explorer 中 却 得 不 到 支持 。 











9.2.9 ENR 


同 其 他 的 解决 方案 不 同 ， 对 于 SQL 存储 来 说 ， 还 没有 比较 好 的 库 可 用 。 因 此 无 法 为 mternet 
Exlporer 用 户 提 供 原生 支持 ,但 是 ,如果 你 认为 这 种 应 用 是 有 用 的 ,那么 可 以 说 服用 户 使 用 Google 
Chrome 来 访问 这 个 特殊 的 应 用 ， 因 为 Google Chrome 在 各 种 平台 上 和 邵 能 使 用 。 实 际 项 目 中 这 种 
方式 并 不 少见 ,特别 征 对 于 需要 同时 在 手机 上 访问 的 内 部 系统 来 说 , R E A E ERE 


另 一 种 可 选 方案 是 使 用 Google Chrome Frame fi^, Æ HTML 页 面 中 的 head 标签 下 添加 : 


Download html5sgql/index.html 
«meta http-equiv-"X-UA-Compatible" content-"chrome-1"» 
这 个 代码 片段 会 被 Google Chrome Frame 插件 读 取 ， 并 为 页 面 局 用 此 功能 。 
如 有 果 要 检测 插件 的 存在 性 , 然后 在 它 不 存在 的 情况 下 提醒 用 户 安 装 , 那么 可 以 将 下 面 的 代码 
插入 到 body 结束 标签 的 上 方 : 





Download html5sgql/index.html 


«script type-"text/javascript" 
src= 
"http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"» 
«/script» 


(QD 参见 http://code.google.com/chrome/chromeframe/ , 
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«script» 


window.attachEvent("onload", function() { 
CFInstall.check(1 
mode: "inline", //[*k4 
node: "prompt" 
12; 
12; 


</script> 

这 样 可 给 用 户 一 个 安装 插件 的 选择 ， 以 便 他 们 能 够 正 稼 使 用 我 们 的 网 站 。 

虽然 对 于 面 同 广 泛 大 众 的 应 用 来 说 ，Google Chrome Frame 可 能 不 是 一 种 可 行 的 解决 方案 ， 
但 是 对 于 像 我 们 刚刚 建立 的 这 种 内 部 系统 来 说 ， 效 末 还 是 不 错 的 。 可 能 会 有 一 些 相 应 的 IT 公司 
政策 禁止 这 么 做 , 不 过 这 个 问题 就 交 给 读者 自己 了 , 看 在 类 似 的 情况 下 你 会 采取 什么 方法 使 这 种 
方案 获得 批准 ?安装 插件 耗费 的 代价 肯定 要 比 自己 编写 SQL 数据 库 系 统 要 小 很 多 。 


9.3 ”实例 22: 离线 运行 
有 了 HTMLS5 离线 功能 的 支持 ,我 们 可 以 使 用 HTML 和 相关 技术 来 建立 在 无 因特网 连接 的 情 
况 下 仍 能 正 第 使 用 的 应 用 。 特别 是 对 于 容易 掉 线 的 移动 设备 来 说 , 开发 这 种 功能 的 应 用 非常 有 用 。 
该 技术 支持 Firefox , Chrome 和 Safari, 也 支持 1O0S 和 Android 2.0 设备, 但 对 于 Internet Explorer 
来 说 还 没有 可 用 的 回 退 方案 。 
AwesomeCo 刚刚 为 其 销售 团队 购买 了 一 些 iPad, 希望 我 们 在 9.3 市 中 所 开发 的 留言 系统 能 够 
离线 运作 。 多 亏 了 HIMEL 的 manifest 文件 ， 这 项 工作 变 得 轻而易举 。 
9.3.1 使 用 manifest 定 义 缓存 


为 了 实现 离线 运行 ， 所 有 需要 存储 在 客户 端 浏 览 器 缓存 中 的 Web 应 用 的 客户 端 文件 都 会 以 
列表 的 形式 存储 在 manifest 文件 中 。 应 用 涉及 的 所 有 文件 都 必须 添加 到 这 个 列表 中 ,以 免 运 行 出 
昔 。 只 有 一 种 特殊 情况 ， 就 是 包含 manifest 的 文件 无 需 添 加 ， 它 会 被 自动 缓存 。 

建立 一 个 名 为 notes.manifest 的 文件 。 其 内 容 如 下 : 


Download html5offline/notes.manifest 











CACHE MANIFEST 
# v = 1.0.0 
/style.css 


(D 参见 http://www.w3.org/TR/html5/offline.html , 
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/javascripts/notes.]js 

/javascripts/jquery.min.js 

RITTER RARER, EE DU] V, ARR AL F o ARAR T a, dX 
要 相应 地 修改 manifest 文件 。 

另外 ， 我 们 使 用 了 在 Google HRS 2$ E83 jQuery， 因 此 硅 应 用 离线 运行 的 话 ， 就 无 法 访问 它 
了 。 因 此 我 们 需要 下 载 jQuery， 并且 修改 script 标签 ,让 其 从 javascripts 文件 夹 中 加 载 jQuery, 


Download html5offline/index.html 





«script type-"text/Jjavascript" 
charset-"utf-8" 
src-"Javascripts/jquery.min.js"» 

«/script» 


接 下 来 , 需要 将 manifest 文件 链接 到 HTML 文档 中 。 实现 方法 是 按 如 下 方式 修改 htm 元 素 : 





Download htmiboffline/index.html 

«html manifest-"notes.manifest"» 

至 此 全 部 操作 就 完成 了 。 在 此 仅 有 一 点 小 小 的 不 足 之 处 ,因为 必须 通过 text/cache-mani fest 
的 MIME 类 型 使 用 ， 所 以 需要 Web HRS rr khet manifest 文件 。 如 采 使 用 的 征 Apache， 可 以 
在 .htaccess 文件 中 这 样 设 置 MIME 类 型 : 

Download html5offline/.htaccess 

AddType text/cache-manifest .manifest 

只 要 问 留 言 系 统 发 送 过 一 次 请 求 ，manifest 列表 中 的 文件 就 会 被 下 载 并 缓存 起 来 。 然 后 我 们 
就 可 以 切断 网 络 连 接 ， 以 离线 方式 随意 访问 系统 了 。 


ERLAR. manifest 文件 还 有 更 多 复杂 的 可 用 选项 。 例 如 ， 可 以 指定 特定 文件 不 能 被 
缓存 且 永 远 不 能 被 离线 访问 ， 这 样 做 有 利于 忽略 特定 的 动态 文件 。 





9.3.2 manifest 和 缓存 


以 开发 模式 使 用 系统 的 时 候 ， 很 可 能 需要 在 Web 服务 右上 蔡 用 一 些 缓存 。 很 多 Web Jl S ax 
缓存 文件 的 默认 方式 是 ， 通 过 设置 header 告诉 浏览 器 在 指定 的 时 间 内 不 要 抓 取 新 文件 副本 。 这 
ADFER manifest 文件 中 添加 信息 的 时 候 跟 踊 bug. 

如 果 使 用 的 是 Apache， 可 以 在 .htaccess 文件 中 添加 如 下 信息 来 禁用 缓存 : 


Download html5offline/.htaccess 





ExpiresActive On 
ExpiresDefault "access" 
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上 述 代码 会 葵 用 整个 目录 的 缓存 ,在 实际 发 行 产品 的 时 候 应 该 是 不 会 这 样 做 的 。 不 过 这 样 可 
LA Bf P DA E ar Ashe 3 DUET VUA HJ manifest 文件 。 


如 果 manifest 中 所 列 的 革 个 文件 有 了 改动 ， 我 们 也 需要 修改 manifest 文件 ， 方法 是 更 改 添加 
到 注释 中 的 版 本 号 。 


9.3.3 ”未 来 展望 


localStorage 和 Web SQL Databases 之 类 的 功能 , 可 以 让 开发 者 开发 出 无 需 连 接 到 Web 服务 
器 即 可 在 浏览 器 中 访问 的 系统 。 运行 在 Pad 和 Android 设备 上 的 应 用 也 一 样 。 当 我 们 将 这 类 功能 
和 HTMLS 的 manifest 文件 结合 起 来 的 时 候 ， 无 需 依 赖 特 定 平 台 ， 便 可 使 用 熟悉 的 工具 建立 离线 
军 应 用 了 。 随 着 越 来 越 多 的 训 艳 缉 开 始 对 这 些 功 能 提供 支持, 开发 人 员 对 它们 的 利用 率 也 会 越 来 
越 高 , 可 以 创建 可 运行 在 多 平台 和 设备 上 , 可 在 本 地 存储 数据 , 可 在 联网 后 进行 数据 同步 的 应 用 。 


Web SQL Storage 的 未 来 疝 未 可 知 。Mozilla 不 准备 在 Firefox 中 实现 Web SQL Storage， 同 时 
W3C 也 换 了 一 种 选择 转 而 推进 IndexedDB 规 沁 的 实现 。 在 11.5 市 我 们 会 对 IndexedDB 规范 进行 
深入 讨论 。 然 而 在 iOS Android 设备 上 ，Web SQL Storage 已 经 应 用 有 段 时 间 了 ， 而 且 看 上 去 
还 会 持续 下 去 。 所 以 对 于 开发 这 类 应 用 的 人 员 来 说 ，Web SQL Storage 规范 会 在 其 开发 过 程 中 起 
到 很 重要 的 作用 。 
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使 用 其 他 API 锦上添花 


许多 有 趣 的 API 都 诞生 于 HTMLS 规范 ， 但 最 终 却 发 展 成 了 独立 的 项 目 ， 而 另外 一 些 则 与 
HTMLS5 紧密 联系 ， 其 中 差异 对 于 开发 人 员 〈 甚 至 作者 ) 来 说 ， 有 时 候 真 的 很 难 言 表 。 本 章 讨论 
的 就 是 这 类 API。 我 们 会 花费 一 点 时 间 来 研究 旧 的 HTML5 API， 然 后 使 用 跨 文档 消息 机 制 实现 
不 同 服务 生 间 页 面 的 通信 。 接 着 还 会 讨论 两 个 非常 踢 大 的 API, RI Web Sockets 和 Geolocation, 
通过 它们 可 以 实现 更 具 交 互 性 的 应 用 。 

建立 这 些 应 用 ， 会 用 到 下 列 API。 

a History TAa ER., [C5. S4, IES8, F3, 010.1, IOS32, A2] 

a 跨 文档 消息 机 制 (Cross-document Messaging) 一 一 在 窗口 则 传递 加 载 自 不 同 域 的 内 容 。 

[C5, S5, F4, IOS4.1, A2] 

Q Web Sockets EA V, zs RR A as HIE IH ARRE, [C5, S5. F4, IOS42] 

从 客户 端 浏 览 器 中 获取 经 纬度 。[C5、S5、F3.5、O10.6、1IOS3.2、A2] 




















D Geolocation 


10.1 实例 23: 维护 历史 记录 


HTMLS 规范 ?1 入 了 一 个 用 于 管理 浏览 辟 历 史记 隶 的 API 。 在 5.2 市 ， 我 们 为 AwesomeCo 
的 新 主页 创建 了 原型 ， 在 单 击 导航 tab 的 时 候 ， 它 会 变换 主页 面 内 容 。 这 种 处 理 方式 的 唯一 不 足 
之 处 束 是 不 支持 讽 览 器 的 后 退 按 钮 。 虽 然 可 以 借助 一 些 辅助 手段 来 处 理 , 但 如 采 使 用 History API 
的 话 问题 最 终 可 以 得 到 较 好 地 解决 。 

这 样 检 测 对 此 API 的 支持 情况 : 


Download htmibhistory/javascripts/application.js 





function supportsHistoryO(t 
return !!(window.history && window.history.pushState); 


j 
每 次 需要 使 用 History RAIER, RA RRETA EREM 


© 参见 http://www.w3.org/TR/html5/history.html, 
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10.1.1 保存 当前 状态 


24 FH Pj] V UTR Web 页 面 时 ， 剖 览 右 会 将 其 语 加 到 历史 记录 中 ， 而 当 用 户 打开 新 tab 的 时 
修 ， 我 们 需要 手动 将 其 添加 到 历史 记录 中 ， 如 下 所 示 : 


Download htmibhistory/javascripts/application.js 


Line 1 $C"nav ul").clickCfunction(event) 1 
target - $(event.target); 
if(target.is("a"))5( 
event.preventDefault(); 
5 if ( $(target.attr("href")).hasClassC"hidden") ){ 


if(supportsHistory(O) (1 

var tab = $(target).attr("href"); 

var stateObject = {tab: tab]; 
e» window.history.pushState(stateObject, tab); 
» }; 





$C".visible").removeClass("visible").addClassC"hidden").hi1deO; 
$(target.attr("href")).removeClass("hidden").addClass("visible").show(); 


$35 


首先 获取 可 见 元 素 的 ID, Aa BT Và, zs FH S JUS S des, pushstateO HENE —/ | Ace 
用 于 后 续 交 互 的 对 象 。 我 们 用 其 保存 将 来 用 户 回 退 到 这 个 环节 时 ， 需 显示 的 tab 的 ID。 例 如 ， 当 
用 户 单 击 Services tab 的 时 候 ， 在 状态 对 象 中 会 存 人 #services。 





二 个 参数 是 一 个 标题 , 用 于 在 历史 记录 中 进行 状态 标识 。 它 与 页 面 中 的 title 元 素 没 有 关 
系 ， 仅 仅 是 在 训 览 右 历 史 中 ， 对 历史 记录 项 的 一 种 标识 。 这 里 还 是 使 用 tab 的 ID, 


10.1.2 ”获取 先前 状态 








在 历史 记录 可 保存 的 基础 上 , 我 们 仍 需 编写 代码 来 处 理 历史 状态 变更 的 情况 。 在 用 户 单 击 后 
退 按 钮 的 时 候 ，window.onpopstate 〇 会 被 触发 。 我 们 借助 它 来 显示 存储 在 状态 对 象 中 的 tab, 


Download htmibhistory/javascripts/application.js 


if(supportsHistory O)1 
window.onpopstate = function(event) { 
if(event.state)1 
var tab = (event.state["tab"]); 
$C".visible") 
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.FemoveClass("visible") 
.addClass ("hidden") 
.hideO; 

$ (tab) 
.FemoveClass("hidden") 
.addClass("visible") 
. Show ; 


j3 
T5 


Akt tab 的 名 称 , 使 用 jQuery 通过 ID 4E priis SE BEORLHU ZU o HERRERIA tab 的 代码 与 原 
先 的 重复 了 ， 因 此 需要 对 其 重 构 以 避免 重复 。 


10.1.3 默认 状态 


在 第 一 次 浏览 页 面 的 时 候 ， 历 史 状 态 会 是 空 ， 因 此 需要 目 行 设置 。 只 需要 在 定义 
window.onpopstate( ) 方 法 的 语句 上 方 添 加 如 下 代码 : 


Download htmibhistory/javascripts/application.js 


if(supportsHistory OD (1 
window.history.pushState( {tab: "Zwelcome", '£welcome'); 
window.onpopstate = function(event) { 

if(event.state){ 

var tab = (event.state["tab"]); 

$C".visible") 
.removeClass("visible") 
.addClass("hidden") 
.hideO; 

$ (tab) 
.removeClass("hidden") 
.addClass("visible") 


. Show ; 
} 
13 
); 
ME, depu vigo, TE RT LAS SE DU bags 92 SPORE UB PEUT tab T., 
10.1.4 [BR 


此 功能 在 Firefox 4 和 Safari 4 中 可 用 ， 并 兼容 Chrome 5, {HÆ Internet Explorer 中 不 被 支持 。 
类 似 于 jQuery Address 插件 的 解决 方案 可 以 提供 相同 的 功能 ， 但 是 我 们 不 会 将 其 作为 回 退 方案 


O 测试 的 时 候 ， 需 要 频繁 地 关闭 浏览 器 并 清空 历史 记录 。 有 时候， 这 会 令 人 感觉 很 麻烦 。 
© 参见 http:/www.asual.com/jquery/address/。 
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来 实现 ， 因 为 与 其 称 之 为 回 退 方案 ,不 如 说 是 市 有 很 多 附加 功能 的 完整 蔡 代 方案 。 请 广 意 讽 蜗 天 
对 操控 历史 记录 的 支持 情况 ,因为 如 采 在 所 有 剖 跷 华中 都 能 使 用 这 一 API 的话, 我 们 便 可 以 轻松 
地 创建 更 具 用 户 友好 性 的 应 用 。 


10.2 ”实例 24: 跨 域 对 话 


一 直 以 来 ， 客 户 端 Web 应 用 脚本 的 交互 都 被 限制 在 当前 域 中 ， 无 法 跨 域 对 话 。 这 种 限制 机 
制 的 设计 初衷 是 为 了 保护 用 户 。 针对 这 一 限制 ， 出 现 了 各 种 各 样 变通 的 实现 方式 ， 包 括 使 用 服 
务 絮 问 代 理 和 特殊 URL 手段 等 。 不 过 现在 我 们 有 了 更 好 的 解决 办 法 。 


HTMLS 规范 引 [入 了 路 文档 通信 (Cross-document Messaging), 。 通 过 此 API， 可 以 让 位 于 不 同 
域 的 脚本 具备 相互 传递 消 肯 的 功能 。 例 如 ， 我 们 可 以 通过 http://support.awesomecompany.com 上 
的 一 个 表单 , 向 内 容 位 于 http://www.awesomecompany.com 上 的 一 个 窗口 或 iframe 发 送 内 容 。 对 
于 目前 我 们 在 做 的 项 目 来 说 ， 只 需要 这 样 做 就 够 了 。 

AwesomeCo 新 的 支持 页 面 需 放置 一 张 联系 人 表单 ， 项 目 经 理 还 要 求 在 其 中 列 出 所 有 支持 人 
R, 并 将 他 们 的 电子 邮件 地 址 置 于 联系 人 表单 的 劳 边 。 支 持 人 员 名 单 将 最 终 来 自 舅 一 个 服务 如 的 
内 容 管理 系统 ， 因 此 我 们 可 以 通过 iframe 将 联系 人 列表 姥 入 到 表单 旁边 。 管 理 员 会 喜欢 这 样 一 
个 功能 : 用 户 单 击 联系 人 列表 中 的 名 字 ， 就 会 在 表单 中 自动 添加 其 电子 邮件 地 址 。 


实现 方式 非常 简单 ， 只 不 过 我 们 需要 使 用 Web 服务 器 来 进行 测试 。 如 果 没 有 服务 器 的 话 ， 
这 份 示 例 代码 不 能 在 所 有 议 览 副 上 运行 。 更 多 内 容 见 “简单 的 Web RAS ae. 





简单 的 Web 服务 器 


如 果 读 者 觉得 配置 Apache 实例 比较 麻烦， 也 不 愿 设 置 自 己 的 服务 器 ， 那 么 可 以 使 用 基 
于 Ruby 的 简单 服务 器 (在 本 书 的 示例 代码 文件 中 可 以 找到 )。 为 使 Ruby 在 自己 的 系统 中 正 
常 运行 ， 请 参考 本 书 源 代码 文件 中 的 RUBY README.txt, 
启动 服务 器 的 方法 是 首先 找到 htm15xdomain/contact1ist， 按 照 如 下 方式 运行 servertb: 
ruby server.rb 
这 样 服务 器 会 在 4567 端口 启动 对 于 htm15xdomain/supportpage 下 的 server.rb 4, 
可 做 同样 操作 , 在 3000 端口 上 局 动 服务 器 。 修 改 server.rb 中 的 配置 可 以 修改 对 应 的 局 动 端口 。 


C 这 便 是 所 谓 的 同 源 策略 。 更 详细 的 介绍 见 https://developer.mozilla.org/en/Same-origin-policy-for-JavaScript, 
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10.2.1 联系 人 列表 


首先 我 们 创建 联系 人 列表 。 基 本 的 标记 如 下 : 


Download htmlbxdomain/contactlist/public/index.html 


«ul id-"contacts"» 
«li» 
«h2»Sales«/h2» 
«p class-"name"»James Norris«/p» 
«p classz"email"»j.norrisQawesomeco.com«/p» 
«/li» 
«li» 
«h2»0perations«/h2» 
«p class= name >Tony Raymond«/p» 
«p class-"email"»t.raymondQawesomeco.com«/p» 
«/li» 
«li» 
«h2»Accounts Payable«/h2» 
«p class-"name"»Clark Greenwood«/p» 
«p class-z"email"»c.greenwoodQ(awesomeco.com«/p» 
«/li» 
«li» 
«h2»Accounts Receivable«/h2» 
«p class-"name"-Herbert Whitmore«/p» 
«p classz"email"-h.whitmoreQawesomeco.com«/p» 
«/li» 
«/ul» 


在 此 页 面 上 , 我 们 还 会 加 载 jQuery 库 和 自己 定制 的 applications 文件 , 以 及 一 个 简单 的 样式 
将 这 些 文件 在 head 区 段 引 入 : 


Download htmlbxdomain/contactlist/public/index.html 


«script type-"text/javascript" 
charset- utf-8" 
src-"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"» 
«/script» 
«script type-"text/javascript" 
src-"Javascripts/application.js"» 
«/script» 
«link rel="stylesheet" href-"style.css" type="text/css" media-"screen"» 


联系 人 列表 的 样式 表 如 下 所 示 : 


Download html5xdomain/contactlist/public/style.css 


uli 
list-style: none; 


} 
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ul h2, ul pímargin: 0;1 
ul liímargin-bottom: 20px;] 


只 用 了 很 少 的 一 些 技巧 ， 我 们 便 使 列表 看 起 来 更 整洁 了 。 
10.2.2 ”发送 消息 


当 用 户 在 联系 人 列表 中 单 击 某 个 项 时 , 我 们 会 从 列表 项 中 获取 电子 邮件 地 址 , 然后 将 消息 发 
送 回 父 窗口 。postMessage 〇 方法 带 有 两 个 参数 : 消息 本 里 和 目标 窗口 地 址 。 下 面 是 完整 事件 处 
理 程序 的 代码 : 

Download html5xdomain/contactlist/public/javascripts/application.js 


$(function { 
$C"Zcontacts li").click(function(event)1 
var email = ($Cthis).find(".ema11").html O5; 
var origin = "http://192.168.1.244:3000/index.html " ; 
window.parent.postMessage(email, origin); 
1233 
J); 


为 了 匹配 父 窗 口 的 URL， 读 者 可 能 需要 修改 代码 中 的 origin, ^ 
TE POR. meN REREN, HRE. 


10.2.3 ”支持 页 面 


支持 页 面 的 结构 看 起 来 会 特别 相似 。 为 了 不 混淆, 特别 是 考虑 到 该 网 站 会 放置 在 男 一 个 Web 
服务 顷 上 ， 我 们 会 新 建 一 个 文件 来。 请 确保 链接 了 样式 表 、jQuery 和 application.js 文件 。 


该 页 面 上 需要 一 份 联系 人 表单 和 一 个 iframe, Jb iframe 会 指向 联系 人 列表 。 代 码 如 下 : 


Download htimlSxdomain/supportpage/public/index.html 








«div id-"form"» 
«form id-"supportform"» 
«fieldset-» 
«ol» 
«li» 
«label for="to">To</label> 
«input type-"email" name-"to" id-"to"» 
«/li» 
«li» 
«label for="from">From</label> 





O 事实 并 不 完全 如 此 。 我 们 可 以 只 用 域 或 者 甚至 是 一 个 通配符 。 不 过 这 里 的 回 退 方案 需要 完整 的 URL， 而 且 这 样 做 
在 安全 性 方面 也 比较 好 。 
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«input type="text" name-"from" id-"from"» 
«/li» 
«li» 
«label for-z'"message"-»Messagec/label» 
«textarea name-"message" id-"message"»«/textarea» 
«/li» 
«/ol» 
«input type="submit" value="Send!"> 
«/fieldset» 
«/form» 
«/div» 


«div id-"contacts"» 
«iframe src-z"http://192.168.1.244:4567/1index.htm1"» «/iframe» 
«/div» 


将 下 面 的 CSS 代码 添加 到 style.css 中 为 页 面 应 用 样式 : 


Download himlSxdomain/supporipage/public/style.css 


Zformí 
width: 400px; 
float: left; 

} 

#contacts{ 
width: 200px; 
float: left; 

上 


contacts iframe 
border: none; 
height: 400px; 

} 

fieldsetí 
width: 400px; 
border: none; 


} 


fieldset legend{ 
background-color: #ddd; 
padding: 0 64px 0 2px; 
} 


fieldset»olí 
list-style: none; 
padding: O0; 
margin: 2px; 


j 


fieldset>01>11f 
margin: 0 0 9px 0; 


padding: O0; 
j 


/* 让 输入 保持 在 自己 的 范围 内 */ 

fieldset input, fieldset textareaí 
display:block; 
width: 380px; 

} 

fieldset input[type=submit]{ 
width: 390px; 

} 


fieldset textareaí 
height: 100px; 
Í 
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这 份 样式 表 将 表单 和 iframe 并 列 在 一 起 ， 并 对 表单 进行 了 修饰 ， 效 采 见 图 10-1, 


To 


h.whitmore@awesomeco.com 





From 





Message Operations 
Tony Raymond 





Sales 


James Norris 
j.norris?awesomeco.com 


t.raymond &awesomeco.com 


Accounts Payable 


Clark Greenwood 





( Send! ; c.greenwood ? awesomeco.com 





Accounts Receivable 
Herbert Whitmore 
h.whitmore 2 awesomeco.com 


10-1. 完整 的 支持 页 


10.2.4 接收 消息 


RAA ORKER, MAAA onmessage 事件 。 消 息 会 作为 event 的 属性 返回 。 使 





H jQuery HJ bind O PREMERE, AREENA IAI A ay 


Download htmlbxdomain/supportpage/public/javascripts/application.js 


$ (function O 1 
$ window) .bind("message" , function(event)1 
$C"£to").val(event.originalEvent.data); 


F): 
135 


jQuery 的 bindQ 〇 方法 封 污 此 事件 ， 只 暴露 部 分 属性 。 


问 可 以 获取 我 们 想 机 的 信息 。 


中 它 都 能 正常 运行 。 


通过 事件 的 originalEvent 属性 来 访 
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此 页 面 可 以 在 Firefox, Chrome, Safari 和 Internet Explorer 8 中 正常 运行 。 接 下 来 ,我们 针对 
IE6 和 IE7 做 些 兼 容 性 修改 。 


10.2.5 ENR 


为 支持 IE6 和 IE7， 我 们 要 使 用 jQuery 的 Postback 插件 ， 此 插件 可 以 模拟 跨 域 消息 交互 。 使 
JH jQuery 的 getScriptQ 〇 方法 可 以 在 需要 的 时 候 才 进行 库 加 载 。 为 实现 这 样 的 功能 ， 只 需要 检测 
postMessage() 方 法 是 否 存 在 即 可 。 


首先 ， 修 改 联系 人 列表 : 
Download himlSxdomain/contactlist/public/javascripts/application.js 


p> if(window.postMessage){ 
window.parent.postMessage(email, origin); 
Jelset 
$.getScript("javascripts/jquery.postmessage.js", function((1 
$.postMessage(email, origin, window.parent); 
43 
] 


jQuery Hj Postmessage 插件 添加 了 一 个 postMessageO) 方 法 ， 此 方法 的 作用 与 标准 的 
postMessageO) 方 法 几乎 一 模 一 样 。 


现在 将 注意 力 转 问 支持 页 面 。 修 改 方式 类 似 ， 添 加 库 然后 调用 新 添加 的 receiveMessageO 
方法 : 
Download htmlbxdomain/supportpage/public/javascripts/application.js 


b> df(window.postMessage)í 
$ window) .bind("message" , function(event) 1 
$C"Zto").val(event.originalEvent.data); 
101 
}else{ 
$.getScript("javascripts/jquery.postmessage.js"”, function(){ 
> $.receiveMessage(C 
| function(event)í1 
» $C"Zto").valCevent.data); 
in ise 


133 
l 
完成 了 ! 现在 我 们 可 以 在 大 量 浏 览 器 中 跨 窗 口交 互 了 。 然 而 这 只 是 一 个 开始 ， 扩 展 上 面 的 技 
术 还 可 以 实现 双向 通信 。 任何 的 窗口 都 可 以 是 发 送 方 ， 也 都 可 以 是 接收 方 。 所 以 请 仔细 阅读 一 下 


规 泄 ， 看 我 们 还 能 创建 出 什么 应 用 出 来 ! 
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10.3 ”实例 25: 使 用 Web Sockets 进行 即时 通信 








多 年 来 , Web 开发 人 员 一 直 致 力 于 研究 实时 交互 。 但 是 大 多 数 实现 方式 局 限于 使 用 Javascript 
周期 性 地 访问 远程 服务 如 来 检测 状态 变更 。HTTP 是 一 种 无 状态 协议 ， 因此 Web vl aF e ARI as 
发 起 连接 ， 获 取 啊 应 ， 最 后 关闭 连接 。 要 在 一 种 无 状态 协议 上 实现 实时 交互 ， 示人 免 太 过 莅 强 。 
HTMLS 规范 引入 了 Web Scockets， 这 使 得 浏 览 器 可 以 辣 远 程 服务 器 发 起 有 状态 的 连接 。 借助 
Web Sockets， 我 们 可 以 构建 各 种 强大 的 应 用 。 对 于 Web Sockets 的 工作 机 制 ， 最 佳 的 了 解 方式 之 
一 是 编写 一 个 即时 通信 客户 端 。 凌 巧 的 是 ，AwesomeCo 的 支持 主页 上 也 有 这 样 的 需求 。 


AwesomeCo 希望 在 其 支持 主页 上 建立 一 款 基 于 Web 的 、 简 单 的 即时 通信 界面 ， 因 为 其 支持 
团队 的 成 员 位 于 不 同 的 城市 ， 这 样 一 来 他 们 就 可 以 进行 内 部 交流 了 。 我 们 将 使 用 Web Sockets X 
实现 即时 通信 服务 器 的 Web 界面 。 用 户 可 以 连接 并 癌 服 务 絮 发 送信 息 。 只 要 联机 ， 用 户 都 能 提 
收 到 该 消息 。 网 站 的 访问 者 可 以 通过 发 送 类 似 “/ 上 昵称 ”的 信息 为 日 己 注册 昵称 ， 这 仿照 了 IRC 
的 聊天 协议 。 我 们 不 需要 完 完 整整 地 编写 这 类 服务 磊 ， 因 为 有 幸 已 经 有 别 的 开发 人 员 写 好 了 。” 


10.3.1 即时 通信 界面 


我 们 会 按照 图 10-2 所 示 的 效 朱 建立 一 个 非 向 简单 的 即时 通信 界面 。 其 中 有 一 个 修改 用 户 昵 
称 的 表单 、 一 个 用 于 显示 消息 的 大 文本 区 域 、 以 及 一 个 在 聊天 中 用 来 发 送 消 息 的 表单 。 








AwesomeCo Help! 





Nickname GuestUser | (Change) 


connecting.... 
Connection closed 


(Send 


Dues 


Message 
10-2. ”即时 通信 务 面 


(D Web Sockets 也 已 经 发 展 形成 了 独立 的 规范 ， 见 http://www.w3.org/TR/websockets/, 
Q 关于 这 种 服务 右 的 更 多 内 容 ， 请 参见 10.3.5 节 。 
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在 全 新 的 HTMLS 页 面 中 ， 我 们 为 即时 通信 界面 添加 标记 ， 包 括 两 个 表单 和 一 个 用 于 包含 聊 
天 信息 的 div。 


Download html5 websockets/public/index.html 


«div id-"chat wrapper"» 
«h2»AwesomeCo Help! «/h2» 
«form id-"nick form" action-"Z" method="post" accept-charset-"utf-8"» 
«p» 
«label»Nickname 
«input id-"nickname" type="text" value-z"GuestUser"/» 


«/label» 
«input type="submit" value-"Change"» 
«/p» 
«/form» 
«div id-"chat"»connecting....«/div» 


«form id-z"chat form" action-z"Z" method="post" accept-charset-"utf-8'"» 


«p» 
«label2Message 
«input id-"message" type="text" /> 
«/label» 
«input type="submit" value-"Send'"» 
«/p» 
</form> 
</div> 


我 们 还 需要 添加 到 样式 表 的 链接 ， 以 及 包 仿 与 Web Sockets Jl 5 2526 EAJRI JavaScript 
文件 。 


Download html5 websockets/public/index.html 


«script src-'chat.js' type-'text/javascript'»«/script» 
«link rel="stylesheet" href-'"style.css" media-"screen"» 


此 处 的 样式 表 包 含 下 列 样 式 定 义 : 
Download html5 websockets/public/style.css 


Linel — chat wrappert 
width: 320px; 
height: 440px; 
background-color: #ddd; 


5 padding: 10px; 
"x 
Zchat wrapper h2í 
margin: O0; 
j 
10 


#chat{ 
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width: 300px; 
height: 300px; 
- overflow: auto; 
15 background-color: Zfff; 
: padding: 10px; 
j 
我 们 在 第 14 行 设 定 了 聊天 消息 文本 区 域 的 overflow 属性 , 这 样 即 指定 了 其 高 度 , 又 可 将 不 


能 容纳 的 文本 都 隐 忠 起 来 ， 并 使 之 可 通过 演 动 条 查看 。 
界面 做 好 了 以 后 ， 我 们 就 可 以 开始 编写 用 于 与 即时 通信 服务 帮 交 互 果 JavaScript 代码 了 。 
10.3.2 与 服务 器 交互 


不 论 使 用 的 是 哪 种 Web Sockets 服务 硕 ， 模 式 都 是 通用 的 。 我 们 会 回 服 务 左 发 起 一 个 连接 ， 
然后 监听 服务 器 发 回 的 事件 并 做 适当 啊 应 。 








事 件 jS XA 
onopen () Elk s as Rie BO vr n fitu 
onmessage() 与 服务 絮 的 连接 发 送 消 息 时 触发 
onclose() 与 服务 缉 的 连接 丢失 或 者 关闭 时 触发 


在 chat.js 文件 中 ， 首 先 需要 按 如 下 方式 连接 Web Sockets 服务 器 : 
Download html5 websockets/public/chat.js 


var webSocket = new WebSocket('ws://localhost:9394/'); 
与 服务 器 连接 成 功 后 ， 应 该 通知 用 户 。 按 如 下 方式 定义 onopenO Hi: 
Download html5 websockets/public/chat.js 


webSocket.onopen = function(event)í 
$C'Zchat').append('«br»Connected to the server'); 
in: 


AAA Vi z8312T-3 HA as HE TED. BORD BA RA AIRE. PREX. dA lid NOU 
MRR AAE. Hil FONE onmessageO 77 iX: 








Download html5 websockets/public/chat.js 


webSocket.onmessage = function(event)í1 
$C'Zchat').append("«br»" + event.data); 
$C'Zchat').animate(ÍscrollTop: $C'Zchat').height (0325; 
}; 


iH Eit event 对 象 的 data 属性 返回 ， 我们 只 需要 将 其 添加 到 聊天 窗口 中 即 可 。 这 里 使 用 
前 置换 行 来 规范 啊 应 消息 , 让 其 各 目 独 立成 行 。 当 然 开 发 人 员 可 以 选择 目 己 喜欢 的 任何 标记 方式 。 
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接 下 来 ， 我 们 要 对 关闭 连接 进行 处 理 。 一 旦 连接 关闭 ，onclose 〇 方法 就 会 被 触发 。 
Download html5 websockets/public/chat.js 


webSocket.onclose = function(event)1 
$C"Zchat").append(' «br»Connection closed'); 
3 


BUCE SERO EROS DC, EL TELS THUS 28 BEST fei IRI Z. 
Download html5 websockets/public/chat.js 


$(function { 
$C"form£chat form").submit(function(e)1 
e.preventDefault(O; 
var textfield = $("Zmessage"); 
webSocket.send(textfield.val O2); 
textfield.val(""5; 
D 
J) 


在 表单 扣 交 事件 中 ， 抓 取 表 单 域 的 值 ， 使 用 send 〇 方法 将 其 发 送 到 即时 通信 服务 


我 们 用 同样 的 方式 来 实现 修改 昵称 的 功能 ， 只 不 过 要 在 消息 前 面 附 加 “/ 上 昵称 "， 这样 服务 颖 
就 会 识别 并 修改 用 户 的 昵称 。 


Download html5 websockets/public/chat.js 








$C"formZnick form").submit(function(e)Í 
e.preventDefault(); 
var textfield = $C"Znickname"); 
webSocket.send("/nick " + textfield.val O); 
2; 


大 功 告 成 。Safari 5 和 Chrome 5 的 用 户 可 以 使 用 此 客户 端 立即 加 入 到 实时 通信 中 。 当 然 我 们 
仍然 需要 为 非 原生 支持 Web Sockets 的 浏览 器 提供 支持 。 在 此 ， 我 们 使 用 Flash 做 替代 。 





10.3.3 ENR 


AEA B)UI S aL RE TE, (Hæ Adobe Flash 已 经 为 其 提供 支持 很 和 人 了。 我 们 
可 以 将 Flash 作为 套 接 字 通 信 层 ， 感 谢 web-socket-js" FE, A f EKIL Flash 回 退 方案 就 是 小 菜 一 
BET, 


下 载 插件 并 放置 到 我 们 的 项 目 中 。 然 后 需要 往 页 面 中 引入 3 个 Javascript 文件 : 


(QD 参见 http://github.com/gimite/web-socket-js/, 
© 参见 http://github.com/gimite/web-socket-js/archives/master, 
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Download html5 websockets/public/index.html 


«script type-"text/javascript" src-"websocket js/swfobject.js'"»«/script» 
«script type-"text/javascript" src-"websocket js/FABridge.js'"»«/script» 
«script type-"text/javascript" src-"websocket js/web socket.]js'"»«/script» 


«script src-'chat.js' type-'text/javascript'»«/script» 
«link rel="stylesheet" href-'"style.css" media-"screen'"» 


«/head» 
«body» 
«div id="chat wrapper'"» 

«h2»AwesomeCo Help! «/h2» 

«form id-z"nick form" action-z"Z" method="post" accept-charset-"utf-8'"» 

«p» 
«label»Nickname 
«input id-"nickname" type="text" value-"GuestUser"/» 


«/label» 
«input type-" submit ”value= Change > 
«/p» 
«/form» 
«div id-"chat"»connecting....«/div» 


«form id="chat form" action-z"Z" method="post" accept-charset-"utf-8'"» 
«p» 
«label2Message 
«input id-"message" type="text" /> 
«/label» 
«input type="submit" value-"Send"» 
«/p» 
«/form» 
«/div» 


«/body» 
</html> 


唯一 要 修改 chatjs 文件 的 地 方 是 ， 设 置 一 个 变量 ， 用 来 指定 WebSocketMain 文件 的 路 径 : 





Download himls_websockets/public/chat.js 


WEB SOCKET SWF LOCATION = "websocket js/WebSocketMain.swf"; 


XXE, BUSTA fH AS zs pe BE Flash 套 接 字 策 略 (Socket Policy) 文件 ， 我 们 的 应 用 便 可 以 
is TUE PUR EmA Vi zsrp f. 


10.3.4 什么 是 Flash 套 接 字 策 略 


出 于 安全 方面 的 考虑 , Flash Player 只 能 通过 套 接 字 同 允许 连接 到 Flash Player 的 服务 器 通信 。 





162 > 第 10 章 使 用 其 他 API 锦 上 添 花 


Flash Player 会 首先 尝试 从 843 vg L13XJ Flash 套 接 字 策 略 文件 ， 然 后 是 服务 器 使 用 的 端口 。 它 期 
望 从 服务 器 获取 到 的 响应 如 下 : 


«cross-domain-policy» 
«allow-access-from domainz"s" to-ports-z"s" /> 
«/cross-domain-policy- 


这 是 一 份 很 弟 规 的 策略 文件 ， 人 允许 所 有 人 连接 到 此 服务 。 如 果 我 们 应 对 的 是 更 敏感 的 数据 ， 
那 可 能 就 需要 指定 更 严格 的 策略 了 。 需 要 注意 的 是 ， 我 们 需要 将 其 放置 在 运行 Web Sockets 的 服 
am b. "wl nu LA] Web Sockets 的 相同 ， 也 可 使 用 843, 


这 一 区 段 的 示例 代码 包含 一 个 简单 的 Flash BE RIS as. "EXE Ruby 写 的 ， 供 我 们 
在 测试 时 使 用 。 在 10.3.5 贡 可 以 看 到 如 何 配置 测试 环境 。 


这 里 的 即时 通信 服务 器 只 是 触及 了 Web Sockets 的 皮毛 。 有 了 Web Sockets， 我 们 便 有 了 一 种 
健壮 而 简洁 的 方式 来 将 数据 推送 到 访问 者 的 训 览 絮 中 。 
10.3.5 ”服务 器 

本 书 的 源码 中 包含 一 个 版 本 的 Web Sockets 服务 妖 。 因 为 它 是 用 Ruby 编写 的 ， 所 以 我 们 需 
要 Ruby 解释 器 。 对 于 如 何 搭建 Ruby 运行 环境 ， 参 见 本 书 源 代码 文件 中 的 RUBY README.txt。 


启动 方式 古 找 到 相应 路 任 ， 输 入 下 述 代 码 : 





ruby server.rb 

除了 即时 通信 服务 如 之 外 ,还 有 两 种 其 他 的 服务 如 可 能 会 在 测试 本 革 代 码 时 用 到 。 第 一 个 服 
25 283E Client. rb, ik FEIKE A mAN Javascript 文件 。 男 一 个 服务 如 是 flashpolicyserver, 
服务 于 Flash 策略 文件 ， 该 文件 为 基于 Flash 的 Web Sockets 回 退 代码 所 用 ， 用 于 与 实际 的 即时 通 
信服 务 如 建立 连 授 。Flash Player 使 用 这 些 策 略 文件 来 判定 其 是 否 可 以 与 还 程 域 进行 对 话 。 


如 果 我 们 使 用 的 是 Mac 或 者 基于 Linux 的 操作 系统 , 可 以 从 html5_websockets 路 径 下 一 次 性 
局 动 所 有 的 服务 右 : 





rake start 


10.4 ”实例 26: Geolocation 


Geolocation 是 一 种 基于 用 户 电脑 位 置 发 现 用 户 所 在 位 置 的 技术 。 当 然 这 里 的 “电脑 ”不 仅 包 
括 台 式 机 ， 同 样 还 指 代 智能 手机 、 平 板 电 脑 ， 以 及 其 他 便携 式 设 备 。Geolocation 通过 用 户 电脑 的 
IP 地 址 、MAC 地 址 、Wi-Fi 热点 位 置 ， 其 至 GPS 坐标 来 判断 用 户 的 所 属 位 置 。 虽 然 不 是 严格 作 
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为 HTMLS 规范 的 一 部 分 ， 但 由 于 是 同期 产生 的 ， 因 此 通 销 与 HTMLS 技术 配合 使 用 。 与 Web 
Storage 不 同 ，Geolocation 从 来 都 没 有 作为 HTML5 规范 的 一 部 分 出 现 过 。 与 Web Storage 相同 的 
是 ，Geolocation 是 一 项 非常 有 用 的 技术 ， 并 已 被 Firefox, Safari 以 及 Chrome 实现 。 让 我 们 来 看 
看 如 何 使 用 Geolocation, 


10.4.1 定位 Awesomeness 


前 面 我 们 为 AwesomeCo 的 Web 站 点 建立 了 一 个 联系 人 页 面 。CIO 又 提出 新 需求 ， 看 是 否 可 
以 在 地 图 上 除 显 示 各 AwesomeCo 支持 中 心 之 外 再 显示 用 户 的 位 置 。 他 希望 看 到 一 个 原型 ， 因 此 
我 们 将 迅速 搭建 一 套 系统 并 使 之 能 马上 运行 。 

我 们 选择 使 用 Google 的 Static Map API， 这 是 因为 一 方面 它 不 需要 API 序 列 号 ， 另 一 方面 是 
我 们 只 需 用 到 一 个 非常 简单 的 地 图 。 

AwesomeCo 服务 中 心 位 置 不 一 ,分 别 是 俄 勒 内 州 的 波 特 兰 、 伊 利 诺 伊 州 的 芝 加 歌 ， 以 及 罗 
得 岛 州 的 普罗 维 登 斯 。 使 用 Google 的 Static Map API 可 以 很 容易 地 在 地 图 上 标记 这 些 点 。 我 们 需 
要 做 的 只 是 建立 img 标签 ， 将 URL 地 址 传 进去 。 如 下 所 示 : 


Download html5geo/index.html 








«img id-"map" alt-"Map of AwesomeCo Service Center locations" 
src-"http://maps.google.com/maps/api/stati1icmap? 

&amp;size-900x300 

&amp;sensor-false 

&amp ;maptype-roadmap 
&amp;markers-color:green|label:A|14«Davol-«square,-«Providence,«RI«02906-3810 
&amp;markers-color:green|label:B|22«4Southwest«3rd-xAvenue, Portland,--OR 
&amp;markers=color:green| label :C|77+West+Wacker+Drive+Chicago+IL"> 


首先 定义 了 图 片 的 大 小 ， 然 后 告诉 Maps API Ri A EHEM ERa (CELA GPS 或 者 
客户 端 地 理 定位 设备 ) 以 及 要 传 给 这 个 地 图 的 信息 。 然 后 通过 指定 标签 和 路 径 的 方式 来 定义 地 图 
中 的 各 个 标记 。 如 东 有 标记 的 话 ， 我 们 可 以 对 其 应 用 喜 志 分 隔 的 经 纬度 值 ， 但 这 里 这 样 做 目的 古 
方便 演示 。 








10.4.2. 如何 定位 
我 们 需要 在 地 图 中 标注 访问 者 的 当前 位 置 。 这 里 使 用 经 度 和 纬度 组 成 的 新 标记 来 实现 。 我们 
可 以 要 求 浏览 器 抓 取 访 问 者 的 经 纬度 ， 如 下 所 示 : 


Download html5geo/index.html 


navigator.geolocation.getCurrentPosition(function(position) { 
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showLocation(position.coords.latitude, position.coords.longitude); 


J23 
这 个 方法 会 弹出 窗口 要 求 用 户 提 供 坐 标 。 如 果 用 户 允 许 我 们 使 用 其 位 置信 息 ， 就 调用 
showLocationO 〇 方法 。 


showLocation() 方 法 接收 经 度 和 纬度 信息 , 重建 图 片 并 替代 已 有 image 的 源 。 下面 是 此 方法 
的 实现 方式 : 


Download htmlogeo/index.html 


Line 1 var showLocation = function(lat, lng)t{ 

var fragment = "&markers-color:red[color:red|label:Y|" + lat + "," + Ing; 
var image = $("Zmap"); 

var source = image.attr("src") + fragment; 

source - source.replace("sensor-false", "sensor-true"); 

1mage.attr("src", source); 


l3 
需 重 复 整 个 图 片 源 代码 ， 为 现 有 的 图 片 源 添 加 经 度 和 纬度 信息 即 可 。 


在 将 修改 后 的 图 片 源 设置 回 文档 之 前 ， 需 要 将 sensor 参数 由 false 设置 为 true， 这 在 第 5 
行 的 replace O DP KH, 


EA RaPi ET, TUARA CME, EH Y” 标记 ， 见 图 10-3, 
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10-3 使用“Y” 将 我 们 当前 的 位 置 标记 在 了 地 图 上 
10.4.3” 回 退 


现在 为 止 ， 页 面 的 访问 者 仍 能 看 到 市 有 AwesomeCo 支持 中 心 位 置 的 地 图 ， 但 如 末 尝 试 加 载 
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页 面 的 话 ， 会 产生 一 个 JavaScript 错误 。 所 以 在 试图 获取 用 户 位 置 之 前 ， 我 们 需要 先 检测 对 地 理 
位 置 定位 的 议 贤 强 支持 情况 ， 如 下 所 示 : 
Download html5geo/index.html 


if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(function(position) 1 
showLocation(position.coords.latitude, position.coords.longitude); 


334 
telsef 


ir 

Google 的 Ajax API 有 查看 位 置 的 功能 ， 因 此 它 是 一 款 理想 的 回 退 解决 方案 。 如 果 要 将 其 正 
式 部 署 在 我 们 自己 的 网 站 上 ， 需 要 获得 API 授 权 码 ， 但 对 于 本 地 调试 来 说 是 不 需要 的 。” 

回 退 代码 如 下 所 示 : 


Download html5geo/index.html 











Linel | var key = "your key"; 
var script = "http://www.google.com/jsapi?keyz" + key; 
$.getScript(script, function { 
if CCtypeof google == 'object') && 
5 google. loader && google.loader.ClientLocation) { 


showLocation(google.loader.ClientLocation.latitude, 
google.loader.ClientLocation.longitude); 


telsef 
var message = $("<p>Couldn't find your address.«/p»"); 
10 message.insertAfter("Zmap"); 
n 
Di 


这 里 使 用 了 jQuery 的 getScriptQ 〇 方法 来 加 载 Google Ajax API。 然 后 第 $ 行使 用 Google 的 
C]1ientLocation0) 方 法 获取 用 户 位 置 并 触发 showLocation0) 方 法 将 位 置 标记 在 地 图 上 。 


不 过 ,不 是 所 有 的 PP 地址 都 能 被 Google 定位 到 ， 所 以 我 们 可 能 还 是 无 法 将 某 些 用 户 标 记 在 
地 图 上 。 因此 第 9 行 , 我 们 在 图 请 的 下 方 放置 了 一 条 信息 。 这 个 回 退 方案 尽管 不 是 那么 无 懈 可 击 ， 
但 却 给 我 们 提供 了 定位 用 户 的 更 大 机 会 。 


对 于 从 客户 端 歼 取 位 置 坐标 来 说 , 在 没有 可 靠 方 法 的 情况 下 , 我 们 需要 提供 一 种 让 用 户 自 己 
提供 地 址 的 方式 ， 不 过 这 项 工作 就 留 给 读者 去 完成 吧 ，。 


QD 参见 http://code.google.com/apis/ajax/documentation/#ClientLocation。 
© 如 果 使 用 http://localhost/ 来 访问 的 话 也 需要 授权 码 。 授 权 码 可 在 http://code.google.com/apis/ajaxsearch/signup.html 
获取 到 。 
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10.4.4 ”未 来 展望 


本 章 所 讨论 的 技术 虽然 不 都 是 HTMLS 规范 的 一 部 分 , 但 却 代 表 着 Web 开发 的 未 来 。 未 来 的 
趋势 是 将 越 来 越 多 的 东西 推送 至 客户 端 。 更 好 的 历史 管理 将 使 得 Ajax 和 客户 端 应 用 变 得 更 加 直 
观 。Web Sockets 可 以 替代 周期 性 轮 询 远 程 服务 器 的 方式 来 展现 实时 数据 。 跨 文档 消息 机 制 可 以 
让 我 们 归并 之 前 完全 没有 可 能 发 生 交 互 的 Web 应 用 。Geolocation 最 终 会 辅助 我 们 建立 更 好 的 位 
置 感知 Web 应 用 ， 随 着 移动 计算 市 场 的 增长 ， 这 部 分 应 用 会 变 得 越 来 越 有 意义 。 

建议 研究 这 些 API， 并 注意 其 适用 性 。 不 久 的 将 来 ， 你 会 发 现 它们 变 成 我 们 Web 开发 工具 
中 的 “重量 级 武器 ”。 











第 了 7 
未 来 的 发 展 方向 








本 书 大 部 分 篇 幅 着 眼 于 当下 可 用 的 技术 , 其 实 还 有 一 些 技术 很 快 就 能 具备 实用 条 件 , 继而 会 
让 我 们 基于 规范 的 Web 开发 变 得 更 加 有 趣 ， 如 带 有 WebGL 的 3D 画布 支持 、 新 的 storage API, 
CSS3 变换 以 及 原生 拖 放 支持 等 。 本 草 讨 论 的 就 是 这 些 即 将 成 型 的 技术 ， 这 样 我 们 便 能 有 个 期 望 
值 。 我 们 即将 讨论 的 这 些 技术 至 少 可 以 应 用 在 一 鞭 辛 览 融 中 , 但 却 没有 足够 好 的 回 退 方案 , 或 者 
暂时 还 不 足以 拿 来 使 用 ， 如 下 所 示 。 

a CSS3 变换 一 一 交互 中 的 动画 。[C3、S3.2、F4、0O10.5、1IOS3.2、A2] 

口 Web Workers 一 一 为 JavaScript 提供 后 台 处 理 技术 。[C3、S4、F3.5、0O10.6] 

a 带 有 WebGL 的 3D 画布 一 一 在 画布 中 创建 3D 对 象 。[C5、F4] 
高 级 客户 端 键 / 值 数据 库存 储 技术 。[F4] 
a 拖 放 一 一 拖 放 操 作 的 API, [C3, S4, F3.5, IE6, A2] 
a 表单 验证 一 一 输入 内 容 的 客户 端 验证 技术 。[C53、S5、10.6] 


我 们 从 CSS3 变换 入 手 ， 看 如 何在 WebKit pul Vi zs PIEH. 

















11.1 CSS3 变换 


在 好 的 用 户 体验 设 计 中 ， 邀 请 式 交 互 是 非常 重要 的 。CSS 已 经 实现 了 对 :hover 伪 类 的 支持 ， 
这 样 我 们 可 以 在 元 素 中 添加 一 些 基 本 的 交互 提示 。 下 面 的 CSS 标记 可 以 让 链接 变 得 更 像 按钮 : 


Download css3transitions/style.css 


.buttont 

padding: 10px; 

border: 1px solid #000; 
text-decoration: none; 


£D 


.button:hoverí 
background-color: #bbb; 
color: #fff 

j 


£D 
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当 鼠 标 移动 到 按钮 上 方 时 ， 背 景色 由 白 变 灰 ， 同 时 字体 颜色 由 黑 变 白 。 这 是 一 种 即时 变换 。 
CSS3 变换 为 我 们 带 来 了 更 多 选择 ， 包 括 只 需 JavaScript 即 可 产生 的 简单 动画 。 例 如 ， 我 们 可 以 
将 上 面 的 这 种 变换 改 为 淡 入 淡出 ， 方 法 古 将 下 面 特别 标 出 的 代码 添加 到 样式 定义 中 : 

Download css3transitions/style.css 


Line 1 a.buttoní 
padding: 10px; 
border: 1px solid 7000; 
text-decoration: none; 
5 -webkit-transition-property: background-color, color; 
- -webkit-transition-duration: 1s; 
-webkit-transition-timing-function: ease-out; 


a.button:hoverí 
background-color: #bbb; 
color: #fff 

j 


在 第 $ 行 ,我 们 指定 了 要 应 用 变换 的 属性 。 在 这 里 改变 的 是 背景 色 和 前 景色 。 第 6 行 定义 了 
动画 时 长 。 第 7 行 指定 了 变换 的 时 间 国 数 。 
F:T [8] e 21 

transition-timing-function 属性 描述 的 是 前 面 设 定 的 动画 时 长 内 ， 变 换 发 生 的 方式 。 我 
们 使 用 三 次 贝 塞 尔 曲 线 定义 此 时 间 函 数 , 三 次 贝 塞 尔 曲线 是 通过 一 幅 图 上 的 4 个 控制 点 来 定义 的 。 
每 个 点 都 肛 值 和 了 值 ， 取 值 攻 围 是 0 1。 第 一 个 和 最 后 一 个 控制 点 始终 为 (0.0,0.0) 和 (1.0,1.0)， 
中 间 两 个 点 决定 了 曲线 的 形状 。 

线性 曲线 的 控制 点 是 两 个 端点 , 会 形成 45 度 角 的 直线 。 线 性 曲线 的 4 个 控制 点 分 别 为 : (0.0， 
0.0)、(0.0,0.0)、(1.0, 1.0), (1.0, 1.0), zx Anl 11-1 所 示 。 








(D 参见 http://dev.w3.org/csswg/css3-transitions/, 
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ease-in iili ZX Hg 28 16, 其 控制 所 为 (0.0, 0.0), (0.42,0.0), (1.0, 1.0), (1.0,1.0), ZI AH 11-2 
所 示 。 


11-2 


同 线性 曲线 相 比 ，ease-in 曲线 只 有 党 二 个 点 不 同 , 正 因为 这 个 点 , 才 让 直线 的 左下 部 变 成 了 
曲线 。 

ease-in-out 曲线 更 复杂 ， 在 底部 和 顶部 都 有 曲线 ， 如 图 11-3 所 示 。 该 曲线 对 应 的 控制 点 为 
(0.0, 0.0), (0.42,0.0), (0.58, 1.0)、(1.0,1.0)。 





11-3 


我 们 可 以 直接 在 CSS 的 属性 中 设置 这 些 控制 点 , 也 可 以 像 上 面 例子 中 一 样 , 使 用 预 设 的 效果 。 

可 供 选 择 的 效果 有 default, ease-in, ease-out, ease-in-out, ease-out-in 以 及 
cubic-bezier， 其 中 cubic-bezier 允许 开发 人 员 自 行 设 定 控 制 点 。 

如 果 希 望 使 用 恒定 的 比率 ， 请 选择 1inear。 如 有 果 和 希望 动画 开始 很 慢 并 逐 靖 变 快 ， 请 选择 
ease-in。 对 于 创建 曲线 方面 的 更 多 知识 ,读者 可 以 在 一 个 很 强大 的 公开 域 脚本 ”中 找到 很 多 例子 ， 
并 能 在 它 的 帮助 下 查看 坐标 。 

玩 转变 换 的 时候 ， 有 一 点 要 铭记 在 心 ， 那 束 是 界面 实用 性 第 一 绚丽 第 二 。 千 万 不 要 创建 会 干 
扰 用 户 的 变换 , 如 忽 隐 忽 现 的 东西 或 者 大 长 的 动画 。CSS3 动画 也 是 一 种 会 引发 我 们 兴趣 的 技术 ， 
它 是 另 一 种 基于 时 间 修 改 CSS 属性 的 方法 。 


(D 参见 http://www.netzgesta.de/dev/cubic-bezier-timing-function.html, 
®© 参见 http://www.w3.org/TR/css3-animations/, 
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11.2 Web Workers 


Web Workers 并 不 是 HTMLS 规范 的 一 部 分 ， 但 如 果 我 们 要 做 一 些 客户 端的 后 台 处 理 ， 就 会 
发 现 这 项 技术 其 实 非常 有 用 ， 因 此 在 这 里 有 必要 提 及 。 

所 有 的 客户 端 编程 只 用 到 JavaScript, 但 JavaScript 是 单线 程 语言 , 也 就 是 说 同一 时 间 只 能 处 
理 一 件 事 情 。 如 果 一 项 任务 耗 时 过 长 ， 那 么 用 户 就 必须 等 待 ， 直 到 该 任务 结束 。Web Workers 3H 
过 一 种 简单 的 写 入 并 发 程序 的 方式 ， 很 好 地 解决 了 这 个 问题 。 

假设 有 一 份 名 为 worker.js 的 脚本 是 用 来 处 理 图 片 的 ， 那 么 可 以 这 样 调用 : 





Download webworkers/application.js 


var worker = new Worker("worker.js"); 


任何 JavaScript 文件 都 可 以 作为 worker 被 调用 , 但 为 了 你 证 worker JERA TE, 所 有 worker 
脚本 都 不 允许 访问 DOM。 这 就 意味 着 我 们 无 法 直接 操控 页 面 元 素 。 


主 脚 本 可 以 使 用 postMessage0 〇 方法 发 送 到 worker 脚本 的 消 上 甩 ， 如 下 所 示 : 


Download webworkers/application.js 


$C"Zbutton").clickCfunction(event) f 
$C"Zoutput").html("starting..."); 
worker.postMessage("start"); 


br 
然后 worker KÆ uf LA 8] E var ehk, EADE postMessageO 77i; : 


Download webworkers/worker.js 


onmessage = function(event) { 
if(event.data === "start")( 
[| 循环 内 可 替换 为 自己 希望 的 操作 
for (var x = 1; x <= 100000; x41 
postMessage(x); 
} 
} 


我 们 通过 监听 主 脚 本 中 的 onmessage 事件 来 啊 应 这 些 事 件 。 每 当 worker ik EAE, WA fih 
发 下 面 的 代码 : 
Download webworkers/application.js 


worker.onmessage = function(event)( 
$C"Zoutput").html(event.data); 
} 


QD 参见 http://www.whatwg.org/specs/web-workers/current-work/, 
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此 API 跟 跨 域 消息 (参见 10.2 节 ) 的 API 类 似 。Internet Explorer 不 支持 Web Workers, We 
我 们 需要 借助 Google Chrome Frame。 不 过 如 果 我 们 要 在 客户 端 做 一 些 繁重 的 非 阻 塞 事 务 ， 那 么 
敬 请 留意 Web Workers 以 后 的 发 展 。 


11.3 原生 拖 放 支持 


一 段 时 间 以 来 ， 我 们 借助 JavaScript 库 已 经 可 以 实现 用 户 拖 放 界面 元 素 的 类 似 功 能 了 。 不 过 
W3C 将 Microsoft 的 拖 放 实现 纳入 了 HTMLS 规范 。 支持 原生 拖 搜 的 浏览 器 包括 Firefox, Safari, 
Internet Explorer 和 Chrome， 但 事实 上 还 是 比较 混乱 的 。 

最 初 的 实现 方式 比较 直观 。 首 先 指 定 某 元 素 是 可 拖 搜 的 ,然后 指定 另外 一 个 元 素来 等 竺 对象 
释放 ， 有 对 象 释放 后 就 执行 一 段 代 码 。 

事实 上 ,并 非 如 此 简单 。 为 演示 起 见 ， 我 们 创建 一 个 简单 的 拖 放 界 面 ， 允许 通过 将 小 图 拖 放 
到 指定 区 域 来 加 载 大 图 。 


Download html5drag/index.html 














«div id-" images" 
«img src-2"1mages/red thumb.jpg" 
data-large-"images/red.jpg" alt-"A red flower"» 
«img src-"images/purple thumb.jpg" 
data-large-"images/purple.jpg" alt="A white and purple flower"» 
«img src2"1mages/white thumb.Jjpg" 


data-large-"images/white.jpg" alt-"A white flower"» 
«/div» 
«div id-"preview"» 


«p»Drop images here</p> 
«/div» 


这 里 使 用 了 用 户 自 定义 数据 属性 来 保存 大 版 本 的 图 片 。 
接 下 来 ,添加 一 些 基 本 样式 ， 为 两 列 添加 浮动 效 末 : 
Download html5drag/style.css 


#images img{ 
-webkit-user-drag 


} 


#images{ 
float: left; 


© 参见 http:/dev.w3.org/htmlS/spec/dnd.html#dnd。 
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width: 240px; 
margin-right: 10px; 
j 


#preview{ 
float: left; 
width: 500px; 
background-color: #ddd; 
height: 335px; 

} 


.hovert 
border: 10px solid #000; 
background-color: #bbb !important; 


} 
至 此 ， 界 面 效 末 如 图 11-4 所 示 。 接 下 来 添加 一 些 事 件 ， 以 便 拖 中 图片 。 


Drop images here 





ELA 图 片 查看 器 


11.3.1 拖 放 事件 








拖 放 元 素 涉及 几 个 事件 。 

€ d" 描述 
ondragstart 在 用 户 开始 拖 动 对 象 时 触发 
ondragend 不 论 何 种 原因 ， 只 要 用 户 停止 拖 动 对 象 就 触发 
ondragenter 可 拖 动 对 象 移动 到 释放 区 域 时 触发 
ondragover 用 户 将 元 素 拖 到 释放 区 域 时 触发 
ondragleave 用 户 将 元 素 拖 出 释放 区 域 时 触发 
ondrop 用 户 成 功 将 元 素 拖 入 释放 区 域 并 释放 时 触发 





ondrag 用 户 拖 动 元 素 时 触 有 发， 持续 发 生 但 可 指定 鼠标 光标 的 X 和 7 从 标 
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这 是 处 理 拖 放 所 用 到 的 全 部 7 种 事件 ， 其 中 一 部 分 事件 市 有 默认 行为 。 如 末 不 对 其 重 写 ， 会 
5 [E THU. 
Hc. dX Yos RPEBUR IRMA BL 7g nTtii RE : 


Download html5drag/application.js 





var contacts = $('£images img'); 
contacts.attr('draggable', 'true'); 


我 们 在 此 添加 了 draggable 的 HTMLS 属性 。 我 们 可 以 在 页 面 标记 中 完成 此 事 , [H75 pm e E 
让 JavaScript 来 处 理 交 互 ， 所 以 将 属性 应 用 到 了 上 脚本 中 。 


当 拖 动 图 片 的 时 候 , 要 获取 大 图 的 地 址 并 保存 下 来 。 我们 为 此 绑 定 ondragstart 事件 , 为 了 
保持 其 简洁 性 和 跨 平台 性 ， 这 里 使 用 jQuery 的 bindo H’. 


Download html5drag/application.js 


Linel | contacts.bind('dragstart', function(event) { 
2 var data = event.originalEvent.dataTransfer; 
3 var src = $(this).attr("data-large"); 
4 data.setData("Text", src); 
5 return true; 
6. s 


规范 中 提供 了 一 种 名 为 datastorage 的 机 制 , 可 以 让 我 们 指定 数据 类 型 和 定义 数据 , 而 数据 
会 被 当成 事件 的 一 部 分 一 并 发 送出 去 。jQuery 的 bindG) 方 法 用 自身 对 象 包 装 事件 ， 因 此 在 第 2 
行 我 们 使 用 originalevent 属性 来 访问 实际 事件 。 第 4 行 , 我 们 在 事件 中 使 用 setDataQ 方 法 为 
图 片 保 存 URL， 数 据 类 型 为 Text, 


现在 便 可 以 拖 动 元 素 了 。 释 放 元 素 时 如 何 触 发 事件 呢 ? 让 我 们 继续 讨论 。 
11.3.2 ”释放 元 素 


我 们 将 “To” 表 单 作为 被 拖 蝶 元素 的 落 入 对 象 ， 因 此 要 找到 这 一 表单 并 绑 定 drop 事件 。 
Download html5drag/application.js 
Linel | var target = $('£preview'); 
target.bind('drop', function(event) { 
var data = event.originalEvent.dataTransfer; 


5 var src = ( data.getData('Text') ); 


var img = $("«img»«/img»").attr("src", src); 


C 注意 ， 使 用 此 方法 时 ， 我 们 在 这 些 事 件 前 面 删除 了 on 前 绥 。 
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$Cthis).html (img) ; 
if Cevent.preventDefault) event.preventDefault(); 
10 return(false); 


5J3 
首先 ， 在 第 5 行 我 们 使 用 getDataQ 〇 方法 获取 随 事件 一 起 传送 的 图 片 地 址 。 然 后 创建 一 个 新 
的 img 元 素 ， 放 入 内 容 区 域 。 


为 了 避免 在 目标 上 释放 被 拖 蝶 元 雪 时 触发 默认 事件 ， 我 们 需要 取消 默认 的 ondropOs&fF, 
操作 方法 是 同时 使 用 preventDefaultO 4H return false, return false 是 Internet Explorer 需 
BAI, MAREN E a ae preventDefaultO, 


现 有 的 代码 直接 放 在 Chrome 或 Safari 中 是 无 法 完全 正常 运行 的 。 至 少 ， 我 们 还 需要 重 写 
ondragover 元 素 。 否 则 ，ondrag 事件 是 无 法 啊 应 的 。 因 此 按照 如 下 代码 进行 修改 : 


Download html5drag/application.js 


target.bind('dragover', function(event) { 
if Cevent.preventDefault) event.preventDefault(); 
return false; 


Dr 
这 里 同样 要 取消 默认 事件 ， 操 作 方 式 跟 上 面 的 ondrop 事件 类 似 。 所 以 参考 如 下 方式 修改 
ondragend 事件 : 


Download html5drag/application.js 


contacts.bind('dragend', function(event) { 
if Cevent.preventDefault) event.preventDefault(); 
return false; 


2r 
xXEEHBBJUIERZE. PRÄRIETRANA sepE. [fHotHUXE XH ondrop 
事件 不 受 彩 啊 。 


11.3.3 ”修改 样式 


当 用 户 将 某 元 素 拖 忠 到 某 个 可 释放 区 域 时 ， 我 们 希望 提醒 用 户 知 道 。 使 用 ondragenter 和 
ondragleave 方法 可 以 做 到 ; 











Download html5drag/application.js 


target.bind('dragenter', function(event) { 
$Cthis).addClass('hover'); 
if Cevent.preventDefault) event.preventDefault(O; 
return false; 
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target.bind('dragleave', function(event) { 
$(this).removeClass('hover'); 
if Cevent.preventDefault) event.preventDefault(); 
return false; 


135 
上 述 代 码 应 用 到 样式 表 中 的 hover 类 ， 会 在 这 些 事 件 触发 的 时 候 被 应 用 和 移 除 。 
11.3.4 拖 动 文件 


在 页 面 上 拖 动 文本 和 元 素 仅 仅 是 初级 阶段 ,规范 还 允许 开发 人 员 创建 这 样 的 界面 , 即 可 接收 
来 自 客户 问 电 脑 的 文件 。 上 传 图 片 或 者 附件 就 像 拖 动 文件 到 特定 区 域 一 样 人 简单 ,实际 上 ,在 Firefox 
3.6 和 Chrome 5 中 使 用 Google 的 Gmail， 会 发 现 已 经 有 这 个 接收 功能 


关于 拖 放 的 更 多 内 容 ， 建 议 咬 读 Leslie Michael Orchard 编写 的 专栏 。 
11.3.5 “并 不 完美 


不 同 训 跷 磺 中 拖 放 行为 的 表现 不 尽 一 致 。 正 8 虽然 支持 拖 放 ， 但 如 果 我 们 将 setData0) 的 数 
据 类 型 从 Text 改 为 Url 的 话 ， 束 不 行 了 。 


此 外 ， 在 Safari 4 中 为 了 支持 对 图 片 和 链接 之 外 的 其 他 元 素 的 拖 动 ， 需 要 在 样式 表 中 添加 额 
外 的 CSS. 


#contents lií 
-webkit-user-drag 


} 

在 全 书 中 , 我 们 多 次 探讨 了 从 内 容 中 把 样式 和 动作 分 离 出 来 古 多 么 重要 。 这 上 段 代 码 恰恰 符合 
这 样 的 概念 。 

不 要 将 文本 拖 到 表单 域 中 。 主流 齐 贤 如 已 经 实现 了 此 功能 , 但 并 没有 较 好 的 方式 来 重 写 该 动 
作 。 

借助 诸如 jQuery UI 之 类 支持 拖 放 的 JavaScript Æ, 我 们 可 以 使 用 更 少 的 代码 获得 更 佳 的 效果 。 


即使 使 用 了 库 ， 我 们 仍 会 面临 一 个 问题 一 一 可 访问 性 。 对 于 无 法 使 用 鼠标 的 用 户 ， 规 范 中 没 
有 提 到 任何 蔡 代 办 法 。 如 采 在 界面 中 实现 了 拖 放 功能 ， 那 么 还 需要 实现 一 个 辅助 功能 ， 即 无 需 
JavaScript 或 者 鼠标 也 可 正 稍 运行 的 方法 ， 而 此 方法 也 依赖 于 实际 需求 。 


规范 的 潍 力 很 大 ,但 确实 还 有 一 些 事情 有 竺 解决。 因此 需要 提醒 大 家 广 意 的 证 ， 仅 应 在 必要 


























(D 参见 http://decafbad.com/blog/2009/07/15/html5-drag-and-drop, 
© 参见 http://docs.jquery.com/UI/Draggable, 
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的 时 候 使 用 ， 不 要 逼迫 用 户 使 用 他 们 不 有 具备 的 东西 。 
11.4 WebGL 


本 书 讨论 过 canvas 元 素 的 2D 上下文， 不 过 一 份 关 于 如 何 使 用 3DOSESRIHBUTG LE FE TIAE FP 
WebGL 规范 不 是 HIMLS 的 一 部 分 ， 但 Apple, Google, Opera 和 Mozilla 都 是 这 一 工作 组 的 成 
员 ， 并 在 各 自 的 肇 览 器 中 对 其 实现 了 相应 的 支持 。 


3D 图 像 方面 的 内 容 远 远 超 出 了 本 书 的 讲述 苑 围 , 不 过 在 Learning WebGL’ 网 站 上 有 很 多 非常 
好 的 示例 和 教程 。 


11.5 Indexed Database API 


本 书 中 讨论 到 两 种 在 客户 端 存 储 数据 的 方式 : Web Storage 和 Web SQL Storage, Mozilla 基金 
会 认为 Web SQL 规范 存在 问题 ， 指 出 不 应 该 将 这 一 规范 建立 在 特定 的 SQL 引擎 基础 之 上 。 于 是 
他 们 引入 了 一 种 新 的 规范 一 一 dexed Database API， 并 计划 将 其 列 为 自己 的 规 苑 。 

同 Web Storage API 的 localStorage 和 sessionStorage 类 似 ，Indexed Database API 也 是 一 
种 键 / 值 对 存储 ， 但 不 同 的 是 ， 后 者 提供 更 高 级 的 查询 功能 。 不 过 ， 在 本 书 编写 之 时 ， 还 没有 六 
贤 絮 实现 此 规 泥 ,因此 无 需 深 入 讨论 任何 实现 细 届 ,因为 很 可 能 在 其 实现 的 时 候 规 玫 已 经 发 生变 
化 了 。Firefox 4 和 Chrome 7 有 可 能 会 支持 此 规范 。 


Indexed Database API 是 需要 我 们 重点 关注 的 规范 ， 因 为 Web SQL 现在 陷入 了 僵局 。Mozilla 
已 经 多 次 声明 不 会 在 Firefox 中 实现 Web SQL, 这 是 因为 Mozilla 不 习惯 SQL 语法 , 他 们 认为 Web 
SQL 规范 不 应 该 建立 在 某 个 特定 的 数据 库 实 现 上 。Web SQL 规 艺 使 用 的 是 SQLite 数据 库 语法 ， 
可 能 会 影响 这 一 规范 的 独立 性 。 不 过 ，Internet Explorer 很 可 能 会 将 其 实现 ， 因 为 Microsoft 在 其 
开发 中 显示 出 了 对 Web SQL 的 极 大 兴趣 。 7 


11.6 ”客户 端 表 单 验 证 


在 客户 端 表单 验证 方面 ，HIML3S 规范 列 出 了 一 些 属性 供 我 们 使 用 。 这 样 ， 在 用 户 将 数据 提 
交 有 至 服务 合 之 前 ， 我 们 便 可 捕 歼 人 答 单 的 输入 错误 。 同 样 的 功能 ， 使 用 JavaScript 的 实现 已 经 存在 
多 年 了 ， 不 过 HTMLS 表单 可 以 使 用 新 属性 来 指定 动作 。 


























(D 参见 https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html , 
© 参见 http://learningwebgl.com/blog/?p-11, 

© 参见 http://www.w3.org/TR/IndexedDB/, 

© 参见 http://hacks.mozilla.org/2010/06/beyond-html5-database-apis-and-the-road-to-indexeddb/, 
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通过 添加 requi red 属性 可 以 确保 用 户 必 盾 某 域 ; 
Download html5validation/index.html 


«label forz'"name"»Name«c/label» 
«input type="text" name="name" autofocus required id-"name"» 


XAA S ae BE PH LE HU óc. JP oS RAD BUE RE, rudk 10—4& JavaScript 验证 
语句 都 不 用 编写 。Opera 已 经 文 持 此 功能 ， 见 图 11-5, 





一 Project Information 
Name 
Estimated Hours | ”| 向 
Start date ( 2010-12-0: :$) 
Email contact 








11-5. Opera 显示 一 条 高 亮 的 警告 


这 样 做 市 省 了 用 户 时 间 , 使 他 们 无 需 等 待 从 服务 硕 返 回 的 啊 应 即 可 发 现 错误 。 此 功能 可 能 被 
禁用 或 者 不 被 文 持 或 者 只 是 未 被 正确 实现 ， 所 以 我 们 仍 需 建 并 服务 如 端的 数据 验证 机 制 。 这 绝对 
契 当 前 应 该 考虑 的 问题 。 因 为 只 有 这 样 ， 我 们 才能 轻松 地 定位 必 项 域 ， 并 使 用 CSS 样式 化 界面 
TR, MER TURR, 


更 进一步 控制 用 户 输 入 的 话 , 可 以 使 用 pattern 属性 。 R PRAL EA ERER A 
保 用 户 输 入 的 内 容 满足 我 们 预期 。 


Download html5validation/index.html 


«input type="text" 
name= "acctnumber" 1d-"acctnumber" 
required 
pattern2"A[1-9]-[0-9]«$"» 


尽管 目前 没有 一 款 浏览 器 在 用 户 界 面 中 使 用 此 功能 ， 但 是 使 用 此 标记 作为 JavaScript 验证 库 
的 基本 验证 功能 还 是 比较 容易 实现 的 。 
11.7 前进! 


作为 一 名 开发 人 员 ， 激 动人 心 的 时 刻 到 了 。 对 于 Web 开发 人 员 面 临 的 未 来 ， 本 书 所 讲述 的 
还 只 是 皮毛 。 关 于 规范 需 了 解 的 东西 还 有 很 多 ， 在 此 希望 大 家 深入 挖 据 。 希 望 大 家 基于 在 本 书 学 
到 的 知识 ， 继 续 探索 ， 并 在 此 过 程 中 留意 各 种 各 样 的 规范 。 


现在 ， 去 建立 令 人 叹为观止 的 应 用 吧 | 








附录 Å 
功能 快速 索引 


在 后 续 的 描述 中 ， 讲 览 各 支 持 情 况 使 用 方 括 号 加 代码 缩写 和 最 低 支 持 版 本 号 的 形式 来 表示 。 
缩写 代码 所 表示 的 意义 分 别 是 : C 表示 Google Chrome, 上 表示 Firefox, IE 表示 Internet Explorer, 
O 表示 Opera, S 表示 Safari, IOS 表示 使 用 移动 版 Safari 的 iOS 设备 ，A 表示 Android XI A zF. 


A.1 新 元 素 
下 面 是 在 2.1 节 引入 的 新 元 素 。 
































a «header» 4E. X. Ul Sr DC ESBJUUE. [C5, F3.6, IES, S4, 010] 

Q «footer» 定义 页 面 或 者 区 段 的 尾部 。[CS、F3.6、IE8、S4、O10] 

OD «nav» 定义 页 面 或 者 区 段 的 导航 链接 部 分 。[C5、F3.6、IE8、S4、0O10] 

O <section> 一 一 定义 页 面 或 者 一 组 内 容 的 逻辑 区 域 。[C5、F3.6、IE8、S4、0O10] 

a «article» 定义 一 篇 文章 或 整 段 内 容 。[CS、F3.6、IE8、S4、O10] 

o <aside> 一 一 定义 次 要 或 相关 内 容 。[C5、F3.6、IE8、S4、0O10] 

Q «meter» JE RE xf. [C5, F3.5, S4, 010] 

O <progress> 一 一 显示 实时 目标 进度 的 控件 。[ 本 书 出 版 时 尚 无 浏览 器 对 其 提供 支持 ] 
A.2 属性 

a 自 定义 数据 属性 一 一 允许 使 用 data- 前 级 为 已 有 的 任意 元 素 添 加 自 定义 属性 ( 引 自 2.2 


市 )。[ 所 有 的 浏览 器 都 可 通过 JavaScript 的 we ] 
过 浏览 器 提供 对 在 位 内 容 





a 在 位 编辑 支持 «p contenteditable»lorem ipsum</p>] 
编辑 的 支持 ( 引 自 3.4 市 )。[C4、S3.2、IE6、0O10.1] 


A.3 表单 


THEE 3.1 P5 AWAK. 
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a 电子 邮件 输入 域 [<input type="emai1">] 一 一 显示 用 于 输入 电子 邮件 地 址 的 表单 域 。 
[O10.1、IOS] 

a URL 输 入 域 [<input type="ur1">] 显示 用 于 输入 URL 的 表单 域 。[O10.1、IOS] 

a 电话 号 码 输入 域 [<input type="tel">| 一 一 显示 用 于 输入 电话 号 码 的 表单 域 。[O10.1、1IOS] 

a 搜索 域 [<input type="search"> 一 一 显示 用 于 输入 搜索 关键 字 的 表单 域 。[C5、S4、0O10.1、 
IOS] 

a 请 块 〈 范 围 选 择 ) [<input type="range">] 一 一 显示 请 块 控件 。[CS、S4、O10.1] 

a 数值 设 定 框 [<input type="number">] 一 一 显示 用 于 输入 数字 的 表单 域 ， 通 第 以 选 值 框 形 
IER. [C5, S5, 010.1, IOS] 

a 日 期 选择 域 [<input type="date">] 
以 及 week, [C5, S5, 010.1] 

a 可 选择 时 间 的 日 期 选择 域 [«input type= "datetime'">] 一 一 显示 用 于 选择 时 间 和 日 期 的 表 
单 域 ， 支 持 datatime, datetime-local xy time, [C5, S5, OIO.I] 

a 颜色 选择 域 [<input type="color">] 显示 取 色 器 的 表单 域 。(Chrome5 和 Safaris 虽然 
可 以 识别 颜色 选择 域 ， 但 不 显示 任何 控件 .) [C5、S5] 


表单 域 属性 


Qa 目 动 聚焦 功能 支持 [<input type="text" autofocus»] 
(5| B 3.27531), [C5, S4] 

a 占 位 文本 支持 [<input type-" email" placeholder-"meQexample. com'"»] 
域内 显示 占 位 文本 (SIE 3.3 53). [C5, S4, F4] 

Q required [<input type-"email" required > | 
S5. 010.6] 

D pattern [<input type="text" pattern2"^[1-9]-«[0-9]*$"» | 
配方 式 验证 表单 域 的 数据 (SIB 11.64). [C5, S5, 010.6] 


可 访问 性 
口 role 属性 [<div role="document">] 


F3.6、S4、IE8、09.6] 


D aria-live [<div aria-live="polite">] 

















显示 用 于 选择 日 期 的 表单 域 , 支持 date, month 














文 持 为 特定 表单 元 素 设 定 焦 反 





LERH. 





设 定 必 填 域 (SIE 11.61). [C5, 





以 正则 表达 式 模 式 . 匹 





为 屏幕 阅读 器 识别 元 素 的 作用 (5 引 自 5.1 市)。[C3.、 





识别 可 自动 更 新 的 区 域 ， 可 能 要 通过 Ajax 
完成 ( 引 自 5.283), [F3.6 (Windows)、S4、IE8] 
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D aria-atomic [<div aria-live-"polite" aria-atomic="true">| 一 一 识别 需要 阅读 
的 内 容 是 实时 区 域 的 整 篇 内 容 还 是 其 中 发 生变 化 的 内 容 (51A 5.2 市 )。[F3.6 (Windows), 


S4、IE8] 


A.6 多 媒体 


Q «canvas» [<canvas><p>Alternative content</p></canvas>] 





支持 通过 JavaScript 
创建 基于 矢量 的 图 形 (5146). [C4, F3, IE9, $3.2, 010.1, IOS3.2, A2] 
A V, s MEREGA 7.3 市 )。 





Q «audio» [«audio src= drums .mp3 ></aud1o>| 
[C4. F3.6, IE9, 83.2, OIO.1, IOS3, A2] 
Q «video» [«video srcz"tutorial.m4v"»«/video»] 


7-8). [C4, F3.6, IE9, S3.2, 010.5, IOS3, A2] 





浏览 器 原生 播放 视频 (SIE 7.4 


A./ CSS3 


下 面 是 在 11.1 5A WAR. 

a :nth-of-type [p:nth-of-type(2n+1){color: red;}] 一 一 寻找 所 有 满足 特定 类 型 的 全 部 
7 个 元 素 ( 引 自 4.1 节 )。[C2、F3.5、S3、IE9、0O9.5、IOS] 

a :first-child [p:first-child{color:blue;}| 一 一 寻找 第 一 个 子 元 素 ( 引 自 4.1 市 )。[C2、 
F3.5. S3, IE9, O9.5, IOS3, A2] 

D :nth-chi ld [p:nth-chi ld (2n«1) £color: red; ji] 
[C2. F3.5, S3, IE9, O9.5, IOS3, A2] 

a :last-child [fp:1ast-child{color:blue;}] 一 一 寻找 最 后 一 个 子 元 素 ( 引 | 自 4.178) ,[C2. 
F3.5. S3, IE9, O9.5, IOS3, A2] 

D :nth-last-chi ld [p:nth- last-child (2) color: red;}] 
4.145), [C2, F3.5, S3, IE9, O9.5, IOS3, A2] 

a :first-of-type [fp:first-of-type{color:blue;}] 一 一 寻找 指定 类 型 的 第 一 个 元 素 (5| 
E 4.135), [C2, F3.5, S3, IE9, 09.5, IOS3, A2] 

a :last-of-type [p:1ast-of-type{color:blue;} 一 一 寻找 指定 类 型 的 最 后 一 个 元 素 (5| 
E 4.145), [C2, F3.5, S3, IE9, 09.5, IOS3, A2] 

a 列 支 持 [#content{ column-count: 2; column-gap: 20px;column-rule: 1px solid 
#ddccb5; }] 一 一 将 内 容 区 域 分 割 成 多 列 ( 引 自 4.3 75). [C2. F3.5, S3, 09.5, IOS3, A2] 

D :after [span.weight:after { content: "lbs"; color: #bbb; 3] [n] content 一 起 使 








癌 后 查找 特定 子 元 素 ( 引 1 自 4.175). 








癌 前 查找 特定 子 元 素 ( 引 自 


主 通 过 


D border-radius [border-radius: 10px;] 
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用 ， 用 来 在 特定 元 素 后 插入 内 容 ( 引 自 4.28), [C2, F3.5, S3, IE8, O9.5, IOS3, A2] 


a 媒体 查询 [media-"only all and (max-width: 480)"] 一 一 基于 设备 设置 应 用 样式 (LB 


4475), [C3, F3.5, S4, IE9, OIO.1, IOS3, A2] 
将 元 素 圆 角 化 《51 目 5.17). [C4, F3, IE9, 





S3.2. O10.5] 


a RGBa 支持 [background-color: rgba(255. 0. 0. 0.5) ;] 一 一 使 用 RGB 颜色 替换 人 带 透 


明度 的 十 六 进 制 码 ( 引 自 8.2 节 )。[C4、F3.5、IE9、S3.2、0O10.1] 


a 阴影 效果 [box-shadow: 10px 10px 5px #333;] 一 一 为 元 素 创 建 阴 影 ( 引 自 8.275). 


[C3、F3.5、IE9、S3.2、0O10.5] 


a 旋转 [transform: rotate(7.5deg) ;] 一 一 旋转 元 素 (3 引 | 自 82 45), [C3, F3.5, IEO9, 


S3.2. O10.5] 


a 渐变 [1inear-gradient(top、#fff、#efefef);] 一 一 创建 渐变 图 片 ( 引 自 8.25), [C4, 


F3.5、S4] 


D Qfont-face [Qfont-face { font-family: AwesomeFont; 


src: url(http://example.com/awesomeco.ttf); font-weight: bold; }] 一 一 人 允 
CSS 使 用 特定 字体 ( 引 自 8.3 5), [CA4, F3.5, IES*, S32, OIO.I] 


A.8 客户 端 存储 


A.9 





O localStorage— 以 键 / 值 对 形式 存储 数据 ， 与 域 绑 定 ， 可 跨 浏 览 磺 会 话 保 持 ( 引 自 9.1 


7H), [CS, F3.5, S4, IE8, 010.5, IOS, A] 

sessionStorage— —LABE/[EDSDE NES, BRAE, UER MA RRA (51A 
9.145). [C5, F3.5, S4, IE8, 010.5, IOS, A] 

Web SQL Databases 完整 的 关系 数据 库 ， 支 持 通过 事务 进行 表 创 建 、 插 入 、 更 新 、 删 除 
和 选择 操作 ， 与 域 绑 定 ， 可 跨 会 话 保 持 (IB 9275). [C5, S32, 010.5, IOS32, A2] 


其 他 API 


Offline Web Applications (离线 Web 应 用 ) 一 一 为 离线 使 用 定义 可 缓存 的 文件 ， 让 应 用 在 无 
因特网 连接 的 条 件 下 也 能 正常 运行 ( 引 自 9.3 5). [C4 S4, F3.5, 010.6, IOS32, A2] 
History (历史 记录 ) 一 一 管理 训 览 侨 历 史 ( 引 自 10.1 市 )。[C5、S4、IE8、F3、O10.1、 
IOS3.2、A2] 

Cross-document Messaging ( 跨 文档 消息 机 制 ) 一 一 在 从 不 同 域 加 载 内 容 的 窗口 之 间 进 行 
消息 传递 (SIH 10.245), [C5, S5, F4, IOS4.1, A2] 
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O Web Sockets 一 一 在 浏览 姻 和 服务 器 之 间 建 并 有 状态 的 连接 ( 引 自 10.3 53). [C5. S5. F4, 





IOS4.2] 
O Geolocation 一 一 从 客户 端 训 贤 絮 中 获取 经 纬度 (SIE 10.41). [C5, S5, F3.5, 010.6, 
IOS3.2、A2] 





口 Web Workers JavaScript 的 后 台 处 理 功 能 ( 引 自 11.2745), [C3, S4, F3.5, 010.6] 
a 带 有 WebGL 的 3D 画布 一 一 在 画布 上 创建 3D 对 象 ( 引 自 11.475), [C5, F4] 
a 拖 放 一 一 执行 拖 放 交互 的 API ( 引 自 11.3 节 )。[C3、S4、F3.5、IE6、A2] 


附录 B 
jQuery Ni) 





要 想 让 我 们 编写 的 JavaScript RAMA EMA Wiss, raf RGOXCBETSTRHE 了， 确实 古 件 难 事 。 
不 过 现在 有 很 多 现成 的 库 可 以 帮 我 们 减轻 痛 奋 ， 而 jQuery 就 是 其 中 最 流行 的 一 个 。jQuery MX 
易 用 ， 而 且 内 伟 的 库 非 常 多 ， 此 外 也 易于 创建 回 退 方案 。 


本 附录 将 介绍 本 书 中 用 到 过 的 jQuery 库 中 的 部 分 内 容 。 本 附录 并 不 能 作为 jQuery 文档 BIS 
代 读物 ， 也 不 会 罗列 出 详细 的 功能 和 方法 列表 ， 而 是 抛砖引玉 ，351| 导 读者 入 门 。 


B.1 Jig jQuery 


可 以 登录 到 jQuery 的 Web 站 点 来 获取 jQuery 库 ， 并 直接 链接 到 jQuery 脚本 。 不 过 ， 这 里 
我 们 将 在 代码 中 链接 到 Google HARS a7 ERIR jQuery: 
Download jquery/simple selection.html 


«script type-"text/Jjavascript" 
charset-"utf-8" 
src-"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"» 
«/script» 


Es] 28 E] — EF RT UI E r ERE TRI HIR e 3281: RA EERE R, 所 以 如 采 我 们 将 图 片 和 脚本 分 
A B ARRAS ue. 352. HJ gcn] LU SUB IRSE TR LIRE. EH Google 的 内 容 交 付 网 络 有 一 个 
好 处 ， 可 能 其 他 网 站 也 会 链接 到 Google 来 加 载 jQuery, XFER, 3X1 LX DIR] AER H REN 
CAERA RaP T jQuery。 众所周知 ， 放 览 如 是 根据 完整 的 URL 来 检测 文件 是 人 否 已 被 组 
存 的 。 如 采 我 们 要 将 jQuery 用 于 笔记 本 电脑 或 者 无 连续 因特网 连接 的 电脑 上 ， 那 就 需要 链接 本 
Hb CLUSTER jQuery XH T. 


B.2 jQuery 基础 
将 jQuery 加 载 到 页 面 上 之 后 ， 我 们 就 可 以 使 用 其 中 的 元 素 了 。jQuery 有 一 个 国 数 名 为 








(D 参见 http://docs.jquery.com, 
© 参见 http:/www.jquery.com 。 
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jQuery()， 它 古 jQuery 库 的 核心 国 数 。 通 过 这 个 图 数 ， 我 们 可 以 使 用 CSS 选择 絮 获 取 元 素 ， 并 
在 jQuery 对 象 中 进行 封装 ， 以 便 进行 操控 。jQueryO 函数 的 简写 形式 为 $O ， 本 书 中 用 的 就 是 这 
种 写法 。 本 附录 后 续 的 内 容 中 ， 我 们 将 称 其 为 “jQuery 函数 "。 下 面 是 其 运行 机 制 。 

假 议 我 们 要 获取 页 面 中 的 hi 标签 ， 方法 如 下 : 

Download jquery/simple selection.html 

$C"h1"); 

假设 我 们 要 找 市 有 important 类 的 所 有 元 素 ， 方 法 如 下 : 

Download jquery/simple selection.html 

$C".important"); 

对 比 上 和 面 两 种 方式 ， 可 以 看 到 唯一 的 区 别 就 是 我 们 所 用 的 CSS tE. jQuery 函数 返 
回 的 是 一 个 jQuery 对 象 ， 它 是 一 种 特殊 的 JavaScript 对 象 ， 其 中 包含 匹配 选择 如 的 一 系列 DOM 
元 紊 。 此 对 象 有 很 多 有 用 的 预定 义 方 法 ， 可 以 用 来 操作 我 们 已 选 的 元 素 。 接 下 来 我 们 详细 讨论 其 
中 的 一 些 预定 义 方法 。 


B.3 修改 内 容 的 方法 
本 书 中 使 用 过 一 些 jQuery 方法 来 修改 HTML 内 容 ， 下 面 同 样 进行 一 些 此 类 操作 。 
B.3.1 hide 和 show 


通过 hide Q HF showO) 方 法 可 以 方便 地 隐藏 和 显示 用 户 界面 元 素 。 按 照 如 下 方式 ， 我 们 
可 以 隐藏 一 个 或 多 个 界面 元 系 : 
Download jquery/simple selection.html 
$C"h1").hideO; 
要 将 其 显示 出 来 ， 只 要 调用 show(G) 方 法 即 可 。 本 书 中 ， 我 们 使 用 了 hideO 7j: Bee Ut Tí 
部 分 区 域 ,这 些 区 域 是 仅 需 要 在 答 用 了 JavaScript 的 情况 下 才 显 示 的 ,比如 字幕 或 者 其 他 回 退 内 容 。 





B.3.2 ”htm1、val1 和 attr 


我 们 使 用 htm GO 方法 来 设置 和 歼 取 特定 元 素 的 内 部 内 容 。 
Download jquery/methods.html 


$("message").html("Hello Worl1d!"); 


这 里 ， 我 们 将 hl 标签 中 的 内 容 设 为 了 “Hello World." , 
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val GO 方法 设置 和 获取 茶 个 表单 域 的 值 ， 其 用 法 同 htm GO 方法 一 样 。 
通过 attrQ 〇 方法， 我 们 可 以 获取 和 设置 元 素 的 属性 。 


B.3.3 append、prepend 和 wrap 





append 〇 方法 可 以 在 已 有 元 素 之 后 添加 子 元 素 。 假设 我 们 有 一 个 人 简单 的 表单 以 及 一 份 空 的 无 
序列 表 : 


Download jquery/methods.html 


«form id2"task form"» 
«label for2"task"»Task«/label» 
«input type="text" i1id-"task" > 
«input type="submit" value-"Add"» 

«/ form» 

«ul id2"tasks"» 

«/ul» 


我 们 可 以 在 提交 表单 的 时 候 ， 通 过 附加 新 元 素 的 方式 为 列表 创建 新 元 系 : 
Download jquery/methods.html 


$ (functionO (1 
$("Ztask form").submit(function(event) Í 
event.preventDefault(; 
var new element = $("«11»5" + $C("£Ztask").valO + "«/11i»"); 
$C"Ztasks").append(new element); 
J); 
2; 


prepend O iln] appendGO 方 法 一 样 都 是 为 列表 附加 元 素 ， 只 是 插入 的 位 置 是 在 已 有 元 素 之 
前 。wrap 0O) 方 法 将 选 定 的 元 素 同 我 们 指定 的 jQuery 对 象 表示 的 元 素 封 装 在 一 起 : 














Download jquery/methods.html 


var wrapper = $("/message") .wrap("<div><h2>Message</h2></div>") parent O 
本 书 中 ， 我 们 使 用 这 种 方式 创建 过 一 些 复杂 的 结构 。 

B.3.4 css 和 类 
我 们 可 以 使 用 CSSO 方 法 为 元 素 定 义 样式 ， 如 下 : 


Download jquery/methods.html 


$C"label").cssC"color", "Zf00"); 
我 们 可 以 一 次 只 定义 一 种 样式 ， 不 过 也 可 以 通过 JavaScript 散 列 为 元 素 设 定 多 种 CSS 规则 : 
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Download jquery/methods.html 


SCURIU).cssC "color". "red", 
"text-decoration" : "underline" 


J3 
然而 ， 其 实 不 应 将 样式 和 脚本 混 到 一 起 。 在 特定 事件 发 生 后 ， 我 们 可 以 通过 jQuery HJ 
addClass Ofll. removeClass(O) 方 法 来 添加 和 删除 类 。 然 后 为 这 些 类 关联 样式 。 通 过 捆绑 jQuery 
事件 和 类 ， 我 们 可 以 在 表单 域 获得 和 失去 焦点 的 时 候 变 换 其 背景 


Download jquery/methods.html 








$C" input").focus(Cfunction(event) 1 
$Cthis).addClass("focused"); 
323 


$C" input").blur(Cfunction(event) ( 
$(this).removeClass("focused"); 


P: 
这 只 是 一 个 简单 的 示例 , 而 我 们 可 以 通过 CSS3 中 的 :focus 伪 类 实现 与 其 一 样 的 功能 。 只 不 
过 后 者 在 一 些 训 览 器 中 无 法 正常 运行 。 


B.3.5 $ 


jQuery 对 象 上 的 方法 返回 jQuery HR, dub RiT LERRA. P2) CREDI EER : 


Download jquery/simple selection.html 


$C"h2").addClassC"hidden").removeClass("visible"); 
需要 注意 的 是 ， 不 要 小 用 链 ， 用 多 了 会 使 代码 可 读 性 变 差 。 


B.4 创建 元 素 


有 了 时, 我 们 需要 创建 新 的 HTML 元 素 , 以 便 将 其 添加 到 文档 中 。 可 以 使 用 jQuery 的 jQuery O 
方法 来 创建 : 

Download jquery/create elements.html 

var input = $("input"); 

虽然 使 用 document.createElement(" input") ;也 可 以 实现 ， 但 如 果 使 用 jQuery 国 数 的 话 ， 
更 方便 调用 额外 的 方法 。 

Download jquery/create elements.html 


var element = $("«p»Hello World«/p»"); 
element.css("color", "£Zf00").insertAfter("Zheader"); 
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这 是 使 用 jQuery 的 链 辅助 快速 建立 和 操作 结构 的 另 一 个 例子 。 
B.5 事件 


通常 在 用 户 与 页 面 交互 的 时 候 会 触发 事件 ， 而 使 用 jQuery 可 以 使 这 种 交互 变 得 非常 简单 。 
在 jQuery 中 ， 很 多 常见 事件 都 是 jQuery 对 象 上 的 简单 方法 。 例 如 ， 可 以 如 下 所 示 使 页 面 上 所 有 
具有 popup 类 的 链接 以 新 窗口 形式 打开 : 


Download jquery/popup.html 





nel var links = $("Zlinks a"); 
links.clickCfunction(event)( 

3 var address = $(this).attr('href'); 

4 event.preventDefault(); 

5 window.open(address); 

6 


331 
在 jQuery 事件 处 理 程序 中 ， 使 用 this 关键 字 可 以 访问 我 们 所 操作 的 元 素 。 在 第 317, R 
们 为 jQuery KAIRA T this 参数 ,这 样 可 以 在 其 上 调用 attr OZ; ik, 用 来 快速 获取 链接 的 日 
标 地 址 。 


使 用 preventDefault( ) 函 数 可 以 防止 原始 事件 被 触发 。 这 样 ， 它 就 不 会 影 啊 到 我 们 正在 进 
行 的 工作 。 


B.5.1 #7 


有 些 事件 无 法 被 jQuery 直接 支持 ,这 样 的 话 , 我 们 需要 使 用 bindO 〇 方法 来 处 理 它们 。 例 如， 
在 实现 HTML5 规范 的 拖 放 功 能 的 时 候 , 就 需要 取消 ondragover 事件 。 bindO 〇 的 使 用 方法 如 下 ; 


Download jquery/bind.html 


target = $C"Zdroparea") 

target.bind(C'dragover', function(event) { 
if (event.preventDefault) event.preventDefault(O; 
return false; 


3r 
注意 我 们 在 监视 的 事件 上 去 挥 了 on 前 级 。 


B.5.2 原始 事件 


不 论 是 bindO 〇 还 是 click()， 只 要 我 们 使 用 jQuery 事件 的 国 数 ，jQuery MAR JavaScript 
事件 封 淡 在 目 己 的 对 象 中 , 并 仅 复制 其 中 的 一 部 分 属性 。 因 此 , 有 时 候 我 们 需要 获取 实际 的 事件 ， 
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以 便 访 问 未 被 复制 的 属性 。jQuery 事件 中 , 我 们 可 以 通过 适当 命名 的 originalEvent 属性 来 访问 
原始 事件 。 例 如 ， 要 访问 onmessage 事件 的 data 属性 ， 方 式 如 下 : 


$ window).bind("message" , function(event)( 
var message data - event.originalEvent.data; 


133 
我 们 可 以 通过 这 种 技术 访问 所 有 原始 事件 的 属性 或 方法 。 


B.6 document.ready 


所 谓 “ 不 唐 突 的 JavaScript  ， 指 的 是 完全 独立 于 内 容 的 JavaScript。 与 原来 在 HTML 7638 E 
添加 onclick 属性 不 同 ， 此 时 的 做 法 是 像 B.5 那样 使 用 事件 处 理 程序 。 在 不 唐 突 的 情况 下 , 我 
们 为 文档 添加 了 动作 ， 却 未 修改 文档 本 身 。 这 样 我 们 的 HTML 便 无 需 依赖 于 用 户 必 须 启 用 
JavaScript J 。 








这 个 方法 有 一 个 问题 ， 即 在 未 提前 声明 的 情况 下 ，JavaScript “看 ”不 见 文档 中 的 任何 元 素 。 
可 以 在 页 面 下 方 通过 script 标签 将 JavaScript 代码 括 起 来 ， 但 这 样 不 能 实现 跨 页 面 复 用 。 





我 们 可 以 将 代码 封装 到 JavaScript 的 window.onLoadG) 事 件 处 理 程序 中 ， 但 是 所 有 的 内 容 完 
全 加 载 完毕 后 才 会 触发 此 事件 ， 因 此 会 有 延迟 。 也 就 是 说 ,用户 可 能 在 事件 触发 前 正在 进行 某 些 
交互。 我 们 需要 一 种 方法 ， 在 DOM 加 载 完 毕 但 尚未 显示 鸭 情况 下 添加 事件 。 


jQuery 的 document. ready 国 数 就 是 这 样 的 作用 ， 可 以 跨 浏 览 右 运转 ， 使 用 方法 如 下 : 


Download jquery/ready.html 


$Cdocument).ready(function() { 
alert("Hi! L am a popup that displays when the page loads"); 


12; 
有 一 种 简写 方式 是 我 们 将 会 在 代码 中 侈 面 采用 的 ， 如 下 面 的 代码 所 示 : 
Download jquery/ready.html 


$Cfunction(O { 
alert("Hi! L am a popup that displays when the page loads"); 


p): 

本 书 中 几乎 所 有 的 示例 都 使 用 了 这 种 模式 ， 这 样 ， 我 们 便 能 轻松 地 、 不 唐 突 地 为 项 目 添 加 回 
退 方案 

这 里 讲解 的 只 是 jQuery 功能 的 一 小 部 分 。 除 了 文档 操作 功能 之 外 ，jQuery 还 提供 了 序列 化 
表单 和 建立 Ajax 请 求 的 功能 ， 还 包括 一 些 实用 函数 用 于 轻松 地 循环 和 人 壳 历 DOM。 在 我 们 熟悉 了 
其 用 法 之 后 ， 无 疑 会 在 目 己 的 项 目 中 发 据 其 更 多 的 用 处 。 





附录 C 
音频 和 视频 编码 


对 音频 和 视频 进行 编码 ， 使 其 用 于 HTMLS 的 audio 和 video 标签 中 ,是 个 复杂 的 课题 ， 超 
出 了 本 书 的 讲述 范围 。 不 过 如 果 开发 人 员 需 要 自行 准备 一 些 内 容 的 话 , 通过 本 附录 的 内 容 可 以 找 
到 一 个 正确 的 方向 。 


C.1 音频 编码 


为 了 适应 广泛 的 听众 ， 我 们 需要 同时 准备 MP3 和 Vorbis 两 种 格式 的 音频 文件 。 这 其 中 要 用 
51JL7- LR, 

在 MP3 文件 编码 方面 ，Lame 可 以 提供 最 好 的 音质 。 在 编码 的 时 候 推 存 用 动态 比特 率 。 通 过 
下 述 方式 可 以 得 到 高 质量 的 编码 : 








lame in.wav out.mp3 -V2 --vbr-new -q0 --lowpass 19.7 

对 于 Vorbis 音频 来 说 ， 需 要 使 用 Oggenc 来 编 杷 。 要 用 动态 比特 率 编码 好 音质 的 Vorbis, PE 
作 如 下 : 

oggenc -q 3 inputfile.wav 

在 Hydrogen Audio” 中 可 以 找到 关于 MP3 和 Vorbis 编码 方面 的 更 多 内 容 。 那 里 的 信息 非常 棒 ， 
但 是 我 们 需要 对 设置 多 做 一 些 试验 ， 对 自己 负责 也 对 听众 负责 。 


C.2 ”为 Web 进行 视频 编码 


在 使 用 HTMLS 视频 的 时 候 , 为 了 使 其 羔 容 多 种 平台 , 我 们 需要 将 视频 文件 编码 为 多 种 格式 .。 
不 论 是 使 用 FFMpeg 之 类 的 开源 编码 大 还 是 实时 编码 ，H.264、Theora 和 VP8 都 比较 耗 时 。 对 视 


(D Lame 在 http://wiki.hydrogenaudio.org/index.php?title=Lame#Quick-start-28short-answer.29, Vorbis 在 http://wiki.hydro- 
genaudio.org/index.php?title=Recommended Ogg Vorbis.o, 
© 参见 http://www.ffmpeg.org/, 
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频 进 行 正确 编码 已 经 超出 ipii NEL, XI ERI WebM 容 带 将 文件 转换 为 VP8 来 说 ,我 
们 并 没有 足够 的 版 面 去 介绍 这 些 命 令 。 


ffmpeg -1 blur.mov 
-f webm -vcodec libvpx vp8 -acodec libvorbis 
-ab 160000 -sameq 
blur.webm 


d ANBIETER SE. 可 以 使 用 Zencoder "Web 服务 。Zencoder 可 以 将 视频 编码 为 HTMLS 
所 需 的 各 种 格式 。 将 视频 放 在 Amazon S3 或 者 其 他 公共 URL 中 ,然后 就 可 以 通过 其 Web 界面 或 
者 调用 API 来 设置 多 种 格式 的 转换 任务 。Zencoder 会 获取 视频 文件 ， 进行 编 码 , 然后 将 新 生成 的 
视频 发 回 我 们 的 服务 器 。 虽 然 此 服务 不 是 免费 的 ,但 其 效果 很 好 ， 而 且 如 果 我 们 要 编码 的 内 容 很 
多 的 话 ， 它 还 能 帮助 节省 大 量 的 时 间 。” 


如 果 开 发 人 员 想 自行 转换 这 些 格式 的 话 ，Miro Vider Converter 是 另 一 个 不 错 的 选择 。 该 软 
件 预 置 了 多 种 输出 格式 ， 而 且 是 开源 的 。 





(D 参见 http://www.zencoder.com/, 
Q 我 认识 Zencoder 的 一 些 开 发 人 员 ， 不 过 即便 不 认识 ， 也 会 推 存 这 个 服务 的 。 
© 参见 http://mirovideo converter.com/, 


附录 D 


Web 上 的 资源 
niger aut .00000 ne reen iaai eiri http://www.apple.com/html5/ 
Apple 关于 HTML5 和 Web 标准 的 页 面 ， 与 其 Safari 5 Web jul ji gs [n] 2b 
GSC gio RR A EE EEE E EAA http://www.css3.info/ 


与 CSS3 f RRESECIRHOSBSAR 4e Hefe EAR DURO, 


EU http://www.fontsquirrel.com 
提供 多 种 免 版 税 的 字体 ， 可 在 Web 上 分 发 。 
IE http://www.w3.org/TR/html5/ 


W3C 上 真正 的 HTML Hyi., 
HTML5 一 Mozilla Developer Center ...................... https://developer.mozilla.org/en/html/html5 
HTMLS 的 Mozilla 开发 者 中 心 页 面 。 


Implementing Web Socket Servers with Node.jSs............... http://www.web2media.net/laktek/ 
2010/ 05/04/implementing-web-socket-servers-with-node-]s/ 


介绍 如 何 使 用 Node.js 编写 Web Sockets Hz 25 Zs , 
Microsoft IE9 Test-Drive .pp http://1e.microsoft.com/testdrive/ 
f£ Internet Explorer 9 中 关于 HTML5 (及 其 相关 ) 功能 的 演示 。 


Ruby and WebSockets—TCP for the Browser ................. http://www.1gvita.com/2009/12/22/ 


ruby- websockets-tcp-for-the-browser/ 
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关于 em-websocket 的 信息 ， 是 一 款 用 于 搭建 Web Sockets 服务 如 的 Ruby Æ. 


Setting Up a Flash Policy File ....................................... http://www.hlghtsphere.com/dev/articles/ 
flash socket policy.html 


包含 对 Flash 套 接 字 策 略 文件 的 详细 描述 。 
由 DT http://www.typekit.com 
一 款 服务 ， 让 开发 人 员 在 其 网 站 上 能 通过 简单 的 JavaScript API 使 用 得 到 许可 的 字体 。 


Unit Interactive: "Better CSS Font Stacks".............. http://unitinteractive.com/blog/2008/06/26/ 


better-css-font-stacks/ 
对 字体 栈 的 讨论 ， 包 仿 一 些 非 第 棒 的 例子 。 
Video for Everybody! .pp http://(camendesign.com/code/video-for-everybody 


XT HTMLS HAREE, BL VETUS PUR DU Sas T) TRO. 





jason ——————————— —— http://videojs.com 
辅助 播放 HTMLS 视频 的 JavaScript 库 。 
when Canl Use 0 A E E E http://caniuse.com/ 


对 于 HTML5、CSS3 和 相关 技术 的 训 览 右 兼 容 性 列表 。 
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HTML5 and CSS3 


Develop with Tomorrow's Standards Today 


HTML5 和 CSS3 和 实例 和 教程 





HTML5 和 CSS3 代 表 着 Web 开 发 的 未 来 ， 虽 然 相 关 规 范 还 未 最 终 敲 定 ， 但 最 新 版 浏览 器 和 移动 设备 都 已 支持 HTML5 和 
CSS3。 本 书 将 带 你 领略 现今 可 用 的 HTML5 元 素 和 CSS3 特 性 ， 并 提供 了 对 旧 浏 览 器 的 向 下 兼容 解决 方案 ， 使 开发 人 员 避 
免 因 此 丢失 用 户 。 


如 果 你 还 在 为 给 按钮 添加 不 同样 式 而 大 量 添加 标记 ， 不 妨 拿 起 本 书 ， 学 习 一 下 HTML5 和 CSS3 新 特性 吧 。HTML5 新 标 
记 可 以 呈现 更 好 的 结构 和 表单 界面 ， 编 写 出 更 为 整洁 易 读 的 代码 。 


如 果 不 想 使 用 Flash， 不 妨 看 看 本 书 是 如 何在 页 面 中 藤 入 音频 、 视 频 和 矢量 图 的 。 此 外 ， 书 中 关于 Web Sockets, $A 
端 存储 、 离 线 缓存 和 跨 文 档 消息 机 制 的 内 容 将 为 你 免 去 不 少 Web 开 发 之 董 。 简 单 的 CSS3 亦 将 丰富 页 面 区 域 的 样式 。 如 果 
你 作为 Web 设 计 师 担心 日 浏览 器 的 兼容 问题 ， 本 书 中 相应 的 解决 方案 将 为 你 排忧解难 。 


未 来 已 在 眼前 ， 前 进 吧 | 


国 Web 和 移动 开发 必 读 
D 擎 握 技 术 走 同 ， 上 自信 应 对 未 来 
D 轻松 实用 、 细 致 入 微 


The 。 ISBN 978-7-115-26724-5 
tic 
: | | 


图 灵 社 区 : www.ituring.com.cn 
反馈 /投稿 /推荐 信箱 : contact@turingbook.com 
热线 : (010)51095186 转 604 
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人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn 定价 :39.00 元 





最 前 冶 的 [T 类 电子 书 发 售 平 全 


电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同 行 还 在 狂 
驳 仿 得 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行动 拥抱 这 个 
出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 全 类 出 
版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 DRM -free 的 阅读 
体验 : 在 线 阅读 和 PDF。 



































相 比 纸 质 书 ， 电 子 书 具 有 许多 明显 的 优势 。 它 不 仅 发 
MR, 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 片 ( 即 使 
有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 着 还 可 以 万 便 地 进 
ÍTR SUMA. RAF EN. 














最 方便 的 开放 出 版 平 合 


图 灵 社 区 同 读 着 开放 在 线 写 作 功 能 ， 协 助 你 实现 目 出 
版 和 开源 出 版 的 梦想 。 利 用 “合集 功能 ， 你 就 能 联 
合 二 三 好 友 共 同 创 作 一 部 技术 参考 书 ， 以 免费 或 收费 
的 形式 提供 给 读 着 。 (收费 形式 须 经 过 图 灵 社 区 立项 
评审 。) 这 极 大 地 降低 了 出 版 的 门 柳 。 只 要 你 有 写作 
的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 























图 灵 社 区 引进 出 厂 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 
社区 公布 。 如 末 你 有 意 翻 译 哪 本 图 书 ， 欢 迎 你 来 社区 
申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 
译 背 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 
需要 有 坚强 的 效力 的 。 


欢迎 加 入 
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图 灵 社 区 进一步 把 传统 出 版 流程 导电 子 书 出 版 业务 
紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 网 上 
审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
式 ， 我 们 称 之 为 “敏捷 出 版 ”， 筷 可 以 让 谈 着 以 较 
快 的 速度 了 解 到 国外 最 新 扩 术 图 书 的 内 容 ， 弥 补 以 
往 翻 译 版 技术 书 “ 出 版 妈 过 时 ”的 缺憾 。 同 时 ， 敏 
捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 万 便 ， 可 以 
提前 销 灭 书稿 中 的 错误 ， 最 大 程度 地 保证 图 书 出 版 


的 质量 。 









































最 直接 的 读者 交流 平台 


在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 区 勘 
误 、 发 表 评论 ， 以 各 种 方式 与 作 译 背 、 纲 辑 人 员 和 
其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 
银子 o 

















fn] LUBABUCB E TEECERTIUT ERUIT. WOES PEXE 
等 多 种 活动 ， 顾 取 积 分 和 银子 ， 积 累 个 人 声望 。 








